jQuery内嵌实现层级菜单

最新推荐文章于 2021-09-19 18:25:34 发布

托尼stark

最新推荐文章于 2021-09-19 18:25:34 发布

阅读量507

点赞数

分类专栏： jQuery 文章标签： jQuery内嵌实现层级菜单

本文链接：https://blog.csdn.net/qq_40808154/article/details/90319539

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

点击标签分类，下拉显示分类的商品，先看下效果图：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>
	<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:peachpuff;
			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>
    <script src='../js/jquery-1.12.4.js'></script>
    <script>
    $(function(){
        $('.level1').click(function(){
            //$(this).slideDown().parent().sibilings().children('ul').slideUp()
            $(this).next().slideDown().parent().siblings().children('ul').slideUp()
            //$(this).next.addClass('current').parent().siblings().children('ul').removeClass()//添加类属性的方式
        })

    })
    </script>

</head>

<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">手机</a>
			<ul class="current">
				<li><a href="#">HUAWEI Mate10</a></li>
				<li><a href="#">vivo X20A 4GB</a></li>
				<li><a href="#">iPhone X 256G</a></li>
				<li><a href="#">小米9 全网通</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>

</html>