开发工具与关键技术:VS2015、jQuery
作者:曾浩源
撰写时间:2019.2.8
一般使用slideToggle和fadeToggle都在列表中,然后利用点击事件调用该方法
首先创建一个简单的ul列表
<ul>
<li id="testli">
<h1>一级one</h1>
<ul id="testul">
<li>
<h2>二级one</h2>
</li>
<li>
<h2>二级two</h2>
</li>
<li>
<h2>二级three</h2>
</li>
</ul>
</li>
</ul>
然后为它添加一点简单的样式
<style>
*{
margin:0;
padding:0;
}
ul{
background:yellow;
list-style-type:none;
}
li{
}
</style>
之后就是这个样子
最后就是点击一级one后收缩列表,js如下
<script src="~/js/jquery.2.1.4.min.js"></script>
<script>
$("#testli").click(function () {
$("#testul").fadeToggle()
})
</script>
是不是感觉很简单,但是这样子会有一点的弊端,就是当你不断快速的点击一级one的时候,你会发现:你点击了多少下它就执行了多少下,当你停下的时候它还在执行未完成的次数
所以就需要酱紫,如下:利用true和false判断当前动画是否完成。
<script src="~/js/jquery.2.1.4.min.js"></script>
<script>
var TrueOrFalse = true;
$("#testli").click(function () {
if (TrueOrFalse) {
$("#testul").fadeToggle(function () {
TrueOrFalse = true;
})
}
TrueOrFalse = false;
})
</script>