龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > jquery实现左侧伸缩菜单

jquery实现左侧伸缩菜单

龙行    web前端    2019-6-13    319    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>

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

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/250.html
  • 上篇文章:jQuery手风琴菜单(改造版)
  • 下篇文章:对短信验证码发送次数的限制,用PHP是如何实现
  • jquery
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
四四五五
音乐欣赏
返回顶部