菜单收缩展开
效果图：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单收缩展示</title>
<style>
body {
font:16px "Microsoft YaHei",sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav-list {
width: 220px;
border-bottom: 1px solid #ccc;
}
.nav-list h3 {
position: relative;
margin: 0;
padding: 10px 20px;
color: #fff;
background-color: #333;
border-top: 1px solid #ccc;
cursor:pointer;
}
.nav-list h3:hover {
background-color: #222;
}
.nav-list h3 span {
position: absolute;
right: 20px;
width: 12px;
height: 12px;
top: 50%;
margin-top: -2px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(225deg);
content: '';
}
.nav-list h3.open span {
top: 50%;
margin-top: -10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: '';
}
.nav-list ul {
display: none;
}
.nav-list li a {
display: block;
padding: 10px 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-bottom: none;
color: #333;
font-size: 14px;
}
.nav-list li a:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="nav-list">
<h3>选择器 <span></span></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>筛选 <span></span></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>样式 <span></span></h3>
<ul>
<li><a href="#">CSS操作</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="#">CSS类</a></li>
<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>
$(document).ready(function () {
// 给 h3 元素 绑定单击事件
$(".nav-list h3").click(function () {
// 显示隐藏ul
// $(this).next("ul").slideToggle();
// 上下等价
// if($(this).next("ul").is(":visible")) {
// $(this).next("ul").slideUp();// 隐藏
// } else {
// $(this).next("ul").slideDown();// 显示
// }
// 添加删除open属性
// $(this).toggleClass("open");
// 上下等价
// if ($(this).hasClass("open")) {
// $(this).removeClass("open");
// } else {
// $(this).addClass("open");
// }
// 终极版
$(this).toggleClass("open").next("ul").slideToggle();
})
});
</script>
</body>
</html>
在此基础上实现手风琴菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴菜单</title>
<style>
body {
font:16px "Microsoft YaHei",sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav-list {
width: 220px;
border-bottom: 1px solid #ccc;
}
.nav-list h3 {
position: relative;
margin: 0;
padding: 10px 20px;
color: #fff;
background-color: #333;
border-top: 1px solid #ccc;
cursor:pointer;
}
.nav-list h3:hover {
background-color: #222;
}
.nav-list h3 span {
position: absolute;
right: 20px;
width: 12px;
height: 12px;
top: 50%;
margin-top: -2px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(225deg);
content: '';
}
.nav-list h3.open span {
top: 50%;
margin-top: -10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: '';
}
.nav-list ul {
display: none;
}
.nav-list li a {
display: block;
padding: 10px 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-bottom: none;
color: #333;
font-size: 14px;
}
.nav-list li a:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="nav-list">
<h3>选择器 <span></span></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>筛选 <span></span></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>样式 <span></span></h3>
<ul>
<li><a href="#">CSS操作</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="#">CSS类</a></li>
<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>
$(document).ready(function () {
// 第一行默认展示
// $(".nav-list h3").first().addClass("open").next("ul").show();
// 给 h3 元素 绑定单击事件
$(".nav-list h3").click(function () {
$(this)// 当前点击的H3
.toggleClass("open")// 当前H3切换open类
.siblings("h3")
.removeClass("open")// 其他H3删除open类
.end()// 返回 $(this)
.next("ul")
.slideToggle()// 当前H3 后面的ul切换
.siblings("ul").
slideUp();// 其他ul隐藏
})
});
</script>
</body>
</html>
