“jQuery”写的垂直手风琴菜单

“jQuery”写的垂直手风琴菜单

1、CSS样式

<style>
	body{
		font:16px "Microsoft YaHei",sans-serif;
		}
	ul{
		list-style-type:none;
		padding:0;  /*避免子元素缩进*/
		margin:0;   /*避免设置ul标签自带的高度*/
		}
	a{  
		text-decoration:none;
		}
	.nav-list{   /*nav-list的样式*/
		width:220px;
		border-bottom:1px solid #ccc;
		}
	.nav-list h3{  /*nav-list标签下h3标签的样式*/
		position:relative;  /*h3标签相对定位*/
		margin:0;  /*避免设置h3标签自带的高度*/
		padding:10px 20px; /*设置h3标签的间距*/
		color:#fff;
		background-color:#333;
		font-size:16px;
		font-weight:normal;  /*设置字体的粗细为正常*/
		line-height:20px;
		border-top:1px solid #ccc;
		cursor:pointer;  /*设置鼠标为手型*/
		}
	.nav-list h3:hover{/*nav-list标签下h3标签鼠标滑过的样式*/
		background-color:#222;
		}
	.nav-list h3 img{   /*nav-list,h3标签下img标签的样式*/
		width:25px;
		height:25px;
		position:absolute;  /*span标签绝对定位*/
		right:17px;  /*设置图标靠右20px*/
		margin:-2px;
		}
	.nav-list ul{    /*nav-list标签下ul标签的样式*/
		display:none; /*默认隐藏*/
		}
	.nav-list li a{		/*nav-list、li标签下a标签的样式*/
		display:block;  /*设置li标签和a标签为块状*/
		padding:10px 20px; /*设置li标签和a标签的间距*/
		background-color:#f5f5f5;
		border:1px solid #ccc;
		border-bottom:none;
		color:#333;
		font-size:14px;
		}
	.nav-list li a:hover{   /*鼠标滑过的样式*/
		background-color:#ccc;
		border-left:2px solid #333;
		}
</style>

2、body样式

<div class="nav-list">
    	<h3>选择器<img src="image/off.png"/></h3>
        <ul>
        	<li><a href="#">基本选择器</a></li>
            <li><a href="#">层级选择器</a></li>
            <li><a href="#">过滤选择器</a></li>
            <li><a href="#">属性选择器</a></li>
            <li><a href="#">内容选择器</a></li>
            <li><a href="#">子元素选择器</a></li>
            <li><a href="#">可见性选择器</a></li>
            <li><a href="#">表单性选择器</a></li>
            <li><a href="#">表单对象选择器</a></li>
        </ul>
        <h3>筛选<img src="image/off.png"/></h3>
        <ul>
        	<li><a href="#">过滤</a></li>
            <li><a href="#">查找</a></li>
            <li><a href="#">关联</a></li>
            <li><a href="#">DOM操作</a></li>
        </ul>
        <h3>样式<img src="image/off.png"/></h3>
        <ul>
        	<li><a href="#">CSS操作</a></li>
            <li><a href="#">位置</a></li>
            <li><a href="#">尺寸</a></li>
        </ul>
        <h3>属性<img src="image/off.png"/></h3>
        <ul>
        	<li><a href="#">属性操作</a></li>
            <li><a href="#">CSS类</a></li>
            <li><a href="#">代码</a></li>
            <li><a href="#">文本</a></li>
            <li><a href="#">值</a></li>
        </ul>
    </div>

3、Script代码

//引入jquery
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$(document).ready(function() {
		//给h3元素绑定单击事件
        $(".nav-list h3").click(function(){
			//判断ul元素是否可见
			if($(this).next("ul").is(":visible")){
				//如果可见就隐藏当前ul元素
				$(this).next("ul").slideUp();
				//获取当前img元素，修改src属性的路径				
				$(this).find("img").attr("src","image/off.png");
				}else{
				//否则打开当前ul元素，当前ul兄弟元素就关闭
				$(this).next("ul").slideDown().siblings("ul").slideUp();	
				//获取当前img元素，修改src属性的路径，并且修改当前元素的父级的兄弟元素里面的img
				$(this).find("img").attr("src","image/open.png").parent().siblings().find("img").attr("src","image/off.png");
					}
			});
    });
</script> 

4、导航栏效果图
（1）未展开效果

（2）展开效果