本文主要是介绍jQuery toggle 使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
jQuery 中 toggle 作用
切换元素的显示与隐藏状态
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
<body>
<div class="header"><div class="logo"><a href="###"><img src="images/logo.png" /></a></div><div class="search"><form><input type="text" class="sBox" value="请输入关键字" onfocus="if(value=='请输入关键字') {value=''}" onblur="if (value=='') {value='请输入关键字'}"/><input type="submit" class="sBtn" value="" /></form></div>
</div>
<div class="nav"><div class="c-nav"><ul><li><a href="###" class="current">首页</a></li><li class="h-m"><a href="###">爱生活<i></i></a><ul class="menu l-life"><li><a href="###">养生<em></em></a></li><li><a href="###">杂谈<em></em></a></li><li><a href="###">穿着<em></em></a></li><li><a href="###">健身</a></li></ul></li><li class="h-m"><a href="###">资讯<i></i></a><ul class="menu r-news"><li><a href="###">八卦<em></em></a></li><li><a href="###">趣事<em></em></a></li><li><a href="###">奇闻<em></em></a></li><li><a href="###">发现</a></li></ul></li><li class="h-m"><a href="###">谈情<i></i></a><ul class="menu t-feelings"><li><a href="###">约会<em></em></a></li><li><a href="###">性情</a></li></ul></li><li class="h-m"><a href="###">找娱乐<i></i></a><ul class="menu l-ent"><li><a href="###">娱乐<em></em></a></li><li><a href="###">资讯<em></em></a></li><li><a href="###">历史</a></li></ul></li><li><a href="###">资料</a></li><li><a href="###">美图</a></li><li><a href="###">专题</a></li></ul><div class="weixin"><a href="###"><i></i>关注微信</a><div class="QRcode"><img src="images/QRcode.png" /></div></div></div>
</div><div class="subNav"><div class="hot"><b>热点推荐:</b><a href="###">秘法</a><a href="###">图片</a><a href="###">图片</a><a href="###">视频</a></div>
</div>
<!--导航条js-->
<script>
$(document).ready(function(e) {$('.nav .c-nav ul li').hover(function(){if($(this).hasClass('h-m')){$('.subNav .hot').toggle()}})
});
</script>
</body>
默认显示
鼠标悬浮
参数 | 描述 |
---|---|
speed | 可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。 可能的值:
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数,则无法使用 switch 参数。 |
callback | 可选。toggle 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
switch | 可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数,则无法使用 speed 和 callback 参数。 |
提示和注释
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
这篇关于jQuery toggle 使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!