js中toggle()及toggleClass()的使用详解
在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调用,toggle的语法如下
toggle(fn1,fn2,fn3·····fnN);
但当toggle（），不带参数时,与show()和hide()的作用一样,切换元素的可见状态,如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态,此时括号内可添加()毫秒(如1000)等),slow,normal,fast等;
toggleClass( )与toggle( )差不多,如果里面含有class样式则移除,没有的话则添加;其事例代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQ列表</title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
#menu{
margin:30px;
width:188px;
background-color:#EFFDFA;
}
.top{
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid #93D6C5;
border-bottom:none;
}
.nav{
list-style:none;
}
li{
display:block;
height:30px;
line-height:30px;
border:1px solid #93D6C5;
border-top:none;
padding-left:30px;
}
.lastone{
border:none;
cursor:pointer;
background-color:red;
}
.up{
border:none;
cursor:pointer;
background-color:blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="menu">
<div class="top">全部商品详细分类</div>
<ul class="nav">
<li><a href="#">尾品汇</a></li>
<li><a href="#">图书音像数字管</a></li>
<li><a href="#">美妆个护</a></li>
<li><a href="#">家具、家纺、家装</a></li>
<li><a href="#">鞋靴、箱包</a></li>
<li><a href="#">珠宝装饰</a></li>
<li><a href="#">手表/眼镜/礼品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">食品、茶、酒</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑办公</a></li>
<li class="lastone"></li>
</ul>
</div>
<script>
$(function(){
$("li:last").click(function(){
$("li:not(li:last):gt(6)").toggle("slow");
$("li:last").toggleClass("lastone");
$("li:last").toggleClass("up");
});
})
</script>
</body>
</html> 点击最后一个将后(不包括最后一个)的四个li隐藏,且最后一个背景颜色改变...
相关推荐
ZillahV0 2016-08-27
yaocong 2019-07-01
武林半侠 2019-06-28
ajhongshaorou 2019-06-28
武林半侠 2019-06-28
ArthursL 2019-06-28
乔乔 2016-07-20
xiuping0 2016-07-19
t0ckh 2011-08-24
liwusen 2019-06-27
Phoebe的学习天地 2019-06-27
黑色幽默 2013-12-02
83453065 2012-12-20
83500391 2012-10-19
JeWangZhe 2012-03-15
每天积累一点点 2011-03-08
81423067 2018-03-03
80473064 2017-06-10
yfisaboy 2015-06-09