jQuery层级菜单

r囧r小猫 2022-02-02 19:04 214阅读 0赞

**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代码

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>