jQuery——手风琴完美实现效果（不会出现重复点击动画还没加载完成）

jQuery——手风琴完整实现案例

先看效果：

html布局：

	<ul class="menu_list">
		<li>
			<div class="keshiliebiao3-list">HTML</div>
			<div class="child_ul">
				<a href="#">HTML基础</a>
			</div>
		</li>
		<li>
			<div class="keshiliebiao3-list">CSS</div>
			<div class="child_ul">
				<a href="#">CSS基础</a>
			</div>
		</li>

		<li>
			<div class="keshiliebiao3-list">JavaScridivt</div>
			<div class="child_ul">
				<a href="#">JS的基础语法 </a>
			</div>
		</li>
		<li>
			<div class="keshiliebiao3-list">Vue</div>
			<div class="child_ul">
				<a href="#">Vue.js</a>
			</div>
		</li>
	</ul>

写好之后写样式：

		* {
    
    
			padding: 0;
			margin: 0;
		}

		ul {
    
    
			list-style-type: none;
			margin: 100px;
		}

		.keshiliebiao3-list {
    
    
			width: 185px;
			height: 46px;
			line-height: 46px;
			padding-left: 38px;
			font-size: 16px;
			color: #475052;
			cursor: pointer;
			border: 1px solid #ddd;
			position: relative;
			margin: 0px;
			font-weight: bold;
			background-color: #eee;
		}
		.child_ul {
    
    
			width: 223px;
			height: auto;
			overflow: hidden;
			line-height: 38px;
			border-left: 1px solid #e0e0e0;
			background-color: #fff;
			border-right: 1px solid #e0e0e0;
			display: none;
		}

		.child_ul a {
    
    
			display: block;
			width: 223px;
			height: 38px;
			line-height: 38px;
			padding-left: 38px;
			color: #666;
			background: #fff;
			text-decoration: none;
			border-bottom: 1px solid #e0e0e0;
		}

然后是特效

<script type="text/javascript">
		$(function () {
    
    
			/* :not(:animated)是用来解决动画没结束时不能执行连续点击的动画效果 */
			$("div.keshiliebiao3-list").click(function () {
    
    
				$(this).next(".child_ul:not(:animated)").slideToggle(300);
				var lis = $(this).parent('li').siblings('li'); 
				lis.children('.child_ul:not(:animated)').slideUp(300); 
			});
		});
	</script>

注意：这类效果解决了用户连续点击父元素展开会出现动画未结束一直执行的效果，只有动画结束之后才会继续执行点击事件。