jQuery层级菜单

Html代码

<body>
		<ul class="menu">
			<li>
				<a href="#" class="level1">手机</a>
				<ul class="current">
					<li><a href="#">iPhone X 256G</a></li>
					<li><a href="#">红米 4A 全网通</a></li>
					<li><a href="#">HUAWEI Mate10</a></li>
					<li><a href="#">vivo X20A 4GB</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">笔记本</a>
				<ul>
					<li><a href="#">MacBook Pro</a></li>
					<li><a href="#">ThinkPad</a></li>
					<li><a href="#">外星人(Alienware)</a></li>
					<li><a href="#">惠普(HP)薄锐 ENVY</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">电视</a>
				<ul>
					<li><a href="#">海信(hisense)</a></li>
					<li><a href="#">长虹(CHANGHONG)</a></li>
					<li><a href="#">TCL 彩电 L65E5800A</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">鞋子</a>
				<ul>
					<li><a href="#">新百伦</a></li>
					<li><a href="#">adidas</a></li>
					<li><a href="#">特步</a></li>
					<li><a href="#">安踏</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">玩具</a>
				<ul>
					<li><a href="#">乐高</a></li>
					<li><a href="#">费雪</a></li>
					<li><a href="#">铭塔</a></li>
					<li><a href="#">贝恩斯</a></li>
				</ul>
			</li>
		</ul>
	</body>

Css代码

<style type="text/css">
			body {
	        	font-family: 'Microsoft Yahei';
	        }
	        body,
	        ul {
	        	margin: 0px;
	        	padding: 0px;
	        }
	        ul {
	        	list-style: none;
	        }
	        
	        .menu {
	        	width: 200px;
	        	margin: 20px auto 0;
	        }
	        .menu .level1,
	        .menu li ul a {
	        	display: block;
	        	width: 200px;
	        	height: 30px;
	        	line-height: 30px;
	        	text-decoration: none;
	        	background-color: #3366cc;
	        	color: #fff;
	        	font-size: 16px;
	        	text-indent: 10px;
	        }
	        .menu .level1 {
	        	border-bottom: 1px solid #afc6f6;
	        }
	        .menu li ul a {
	        	font-size: 14px;
	        	text-indent: 20px;
	        	background-color: #7aa1ef;
	        }
	        .menu li ul li {
	        	border-bottom: 1px solid #afc6f6;
	        }
	        .menu li ul {
	        	display: none;
	        }
	        .menu li ul.current {
	        	display: block;
	        }
	        .menu li ul li a:hover {
	        	background-color: #f6b544;
	        }
		</style>

JavaScript的代码

	<!--引用jQuery-->
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var a_All=$('.level1');
				a_All.click(function(){
					$(this).next('ul').slideDown()
					//隐藏这个人的父级的兄弟级
					$(this).parent().siblings().children('ul').slideUp();
				})
			})
		</script>

猜你喜欢