jQuery中的slideToggle和fadeToggle

开发工具与关键技术：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>