[jQuery基础] jQuery动效案例(三) -- 下拉菜单、折叠菜单

下拉菜单

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 300px;
height: 50px;
background: red;
margin: 100px auto;
cursor: pointer;
}
.nav>li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.sub{
list-style: none;
background: mediumpurple;
display: none;
}

• html部分

<ul class="nav">
	<li>一级菜单
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
</ul>

第二步(动态实现)

在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画

• 监听一级菜单的移入事件
  • 拿到二级菜单
    • 停止当前正在运行的动画
  • 让二级菜单展开

$(".nav>li").mouseenter(function () {
	// 1.1拿到二级菜单
	var $sub = $(this).children(".sub")
	// 停止当前正在运行的动画
	$sub.stop()
	// 1.2让二级菜单展开
	$sub.slideDown(1000)
})

• 监听一级菜单的移出事件
  • 拿到二级菜单
    • 停止当前正在运行的动画
  • 让二级菜单收起

$(".nav>li").mouseleave(function () {
	// 2.1拿到二级菜单
	var $sub = $(this).children(".sub")
	// 停止当前正在运行的动画
	$sub.stop()
	// 2.2让二级菜单收起
	$sub.slideUp(1000)
})

 
 
 
 
 

折叠菜单

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
	margin: 0;
	padding: 0;
}
.nav{
	list-style: none;
	width: 300px;
	margin: 100px auto;
	cursor: pointer;
	/*border: 1px solid #000;*/
}
.nav>li{
	border: 1px solid #000;
	line-height: 35px;
	border-bottom: none;
	text-indent: 2em;
	position: relative;
}
.nav>li:last-child{
	border-bottom: 1px solid #000;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.nav>li:first-child{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.nav>li>span{
	background: url("https://s1.ax1x.com/2020/06/18/NZzlhF.png") no-repeat center center;
	display: inline-block;
	width: 32px;
	height: 32px;
	position: absolute;
	right: 10px;
	top: 5px;
}
.sub{
	display: none;
}
.sub>li{
	list-style: none;
	background: yellow;
	border-bottom: 1px solid white;
}
.sub>li:hover{
	background: red;
}
.nav>.current>span{
	transform: rotate(90deg);
}

• html部分

<ul class="nav">
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单<span></span>
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
</ul>

第二步(动态实现)

• 拿到二级菜单
• 让二级菜单展开
• 拿到所有非当前的二级菜单
• 让所有非当前的二级菜单收起
• 让被点击的一级菜单箭头旋转
• 让所有非被点击的一级菜单箭头还原

$(function () {
	// 1.监听一级菜单的点击事件
	$(".nav>li").click(function () {
		// 1.1拿到二级菜单
		var $sub = $(this).children(".sub")
		// 1.2让二级菜单展开
		$sub.slideDown(1000)
		// 1.3拿到所有非当前的二级菜单
		var otherSub = $(this).siblings().children(".sub")
		// 1.4让所有非当前的二级菜单收起
		otherSub.slideUp(1000)
		// 1.5让被点击的一级菜单箭头旋转
		$(this).addClass("current")
		// 1.6让所有非被点击的一级菜单箭头还原
		$(this).siblings().removeClass("current")
	})
})