jQuery 中 toggle 作用

切换元素的显示与隐藏状态

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

<body>
<div class="header">
<div class="logo"><a href="###"><img src="data: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="data: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>

默认显示

jQuery toggle 使用-LMLPHP

鼠标悬浮

jQuery toggle 使用-LMLPHP

参数描述
speed

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

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

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

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

callback

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

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

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

switch

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

  • True - 显示所有元素
  • False - 隐藏所有元素

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

提示和注释

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

05-20 05:24