利用jQuery之toggle()制作点击一次显示再次点击一次隐藏菜单按钮

作者:Davidszhou   来源:   时间:2015-11-24 22:10:08   点击:

利用jQuery制作点击一次显示再次点击一次隐藏菜单按钮
本来是想用javascript做的,白菜的我们可能目前弄这个还是有点麻烦,转折使用jQuery。
想要制作点击一次显示再次点击隐藏的菜单按钮,利用jQuery的toggle() 方法切换元素的可见状态。
先来看看教程给出的案例代码:

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">< /script>/*这里引用了一个百度的公共库里面jQuery库,这个必须*/
<script type="text/javascript">
$(document).ready(function(){    /*花括号前面意思是页面机构绘制完毕即执行花括号内代码*/
  $(".btn1").click(function(){      /*这里是当点击.btn1即执行下面花括号内代码*/
  $("p").toggle();             /*这里元素p执行隐藏和显示的代码,也就是toggle() */
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>



下面贴出教程给出toggle()的具体语法:

$(selector).toggle(speed,callback,switch)

参数

描述

speed

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

可能的值:

·         毫秒 (比如 1500)

·         "slow"

·         "normal"

·         "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

·         True - 显示所有元素

·         False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。


实际操作中:
1、    制作好一个“按钮”,例如:<i id="menu" class="menua"></i>这里我是做了一个“三道黑杠”类似菜单按钮,然后给i元素作为背景图
2、    做一个下拉的ul-li菜单,按照自己事先准备好的样式写好代码,我是放在div里面,CSS给这个DIV样式“display:none;”,因为当页面加载时我是不准备让他就显示的,这样点击” menua”的“按钮”时显示与隐藏div。

样例文件点击:

利用jQuery之toggle()制作点击一次显示再次点击一次隐藏菜单按钮
文件类型: .html d20fb6b87dea949070e7bdec58251e4d.html (2.13 KB)

TAGS:jQuery , 显示 , 隐藏 , 菜单 , 按钮 , toggle

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/70.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18