简单的jquery导航二级菜单展示功能

最新推荐文章于 2023-11-11 19:23:59 发布

大可大可抖

最新推荐文章于 2023-11-11 19:23:59 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/p930318/article/details/78114029

版权

导航移上高亮并且显示二级菜单，移除后恢复：

html

<div class="nav">
		<ul>
			<li>语文
				<ul>
					<li>读课文</li>
					<li>默写</li>
					<li>诗歌大赛</li>
				</ul>
			</li>
			<li>数学
				<ul>
					<li>速算</li>
					<li>应用题讨论</li>
					<li>写试卷</li>
				</ul>
			</li>
			<li >科技
				<ul>
					<li>博物馆参观</li>
					<li>头脑风暴</li>
				</ul>
			</li>
			<li>美术
			   <ul>
			   		<li>速写</li>
					<li>人体模特表演</li>
					<li>临摹</li>
			   </ul>
			</li>
		</ul>
	</div>

css

.nav ul{width: 300px;}
.nav > ul > li{  background-color: #333333; color: #eee;  list-style-type: none;}
.nav .on{ background-color: #dcdcdc; color: #999; }
.nav >ul > li >ul{display: none;}
.navchilder{ color: #f00; text-decoration: underline; }

jquery

$('.nav>ul>li').mouseover(function(){
	$(this).addClass('on').children().show().parent().siblings().removeClass('on').end().siblings().children().hide();
 });//移上本身添加on类名,下级显示,父级的同辈元素删除on类,返回最原始,同辈元素的子元素隐藏
$('.nav>ul>li').mouseout(function(){
	$(this).removeClass('on').children().hide();
}); //移出删除原色上的on类，子元素隐藏
$('.nav>ul>li>ul>li').hover(function(){
	$(this).addClass('navchilder').siblings().removeClass('navchilder');
}) //子元素移上显示当前高亮