jquery实现左侧伸缩菜单

现在位置：首页 > 编程语言 > web前端 > jquery实现左侧伸缩菜单

jquery实现左侧伸缩菜单

龙行 web前端 2019-6-13 2619 0评论

学习了哈伸缩菜单制作，没办法我是菜鸟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伸缩菜单</title>
		<style>
			body {
				
				font:16px "Microsoft YaHei",sans-serif;
			}
			ul {
				list-style: none;
				margin:0;
				padding : 0;
				display: none;
			}

			a {
				text-decoration: none;
			}
			
			.nav-list {
				wifth:220px;
			}

			.nav-list h3{
				width:220px;
				margin:0;
				padding:10px 20px;
				font-size:16px;
				line-height: 20px;
				font-weight: normal;
				color: #fff;
				background-color: #333;
				border-top: 1px solid #ccc;
				cursor:pointer;
			}

			.nav-list ul li {
				width : 259px;
			}

			.nav-list h3 span {
				position : absolute;
				right: 20px;
				top:14px;
				width:12px;
				height:12px;
				background: url("zuo.png")no-repeat;
			}

			.nav-list h3.open span {
				background: url("shang.png")no-repeat;
			}

			.nav-list h3:hover {
				background-color: #222;
			}

			.nav-list li a {
				display: block;
				padding: 10px 20px;
				background-color: #f5f5f5;
				border:1px solid #ccc;
				border-bottom:none;
				color:#333;
				font-size:13px;
			}

			.nav-list li a:hover {
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
	<div class="nav-list">
		<h3>选择器 <span></span></h3>
		<ul>
			<li><a href="#">id选择器</a></li>
			<li><a href="#">标签选择器</a></li>
			<li><a href="#">类选择器</a></li>
			<li><a href="#">子类选择器</a></li>
		</ul>
		<h3>会员管理<span></span></h3>
		<ul>
			<li><a href="#">会员列表</a></li>
			<li><a href="#">会员添加</a></li>
			<li><a href="#">会员删除</a></li>
		</ul>

		<h3>权限管理<span></span></h3>
		<ul>
			<li><a href="#">权限添加</a></li>
			<li><a href="#">权限删除</a></li>
			<li><a href="#">角色列表</a></li>
		</ul>
	</div>
		







		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.nav-list h3').click(function(){

					$(this).toggleClass("open").next("ul").slideToggle();

					//判断ul是隐藏还是显示
					//第一种方法
					// if($(this).next("ul").is(":visible")){
					// 	$(this).next("ul").slideUp();
					// }else{
					// 	$(this).next("ul").slideDown();
					// }

					//第二种方法
					// $(this).next("ul").slideToggle();

					//第三种
					//$(this).toggleClass("open").next("ul").slideToggle();
				})
			})
		</script>
	</body>
</html>

评论一下分享本文赞助站长