利用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()制作点击一次显示再次点击一次隐藏菜单按钮