准备
- 将右箭头图标下载好(在iconfont矢量图标库中下),放到html所在的文件夹中
- 将jquery库动态引入
script src=“https://code.jquery.com/jquery-3.5.1.min.js”
思路
- 将子菜单写到父菜单里
- 开始时将子级菜单隐藏
- 点击时再将子级菜单显示
注意
ul与li有默认的格式以及padding和margin
图标是放在span里,需要将span设置成inline-block元素才能看到图标
代码
html部分代码:
<ul class="container">
//定义一个容器,居中显示
<li class="nav">一级菜单<span></span>
<ul class="sub">
//子菜单
<li>第一级子标题</li>
<li>第二级子标题</li>
<li>第三级子标题</li>
<li>第四级子标题</li>
</ul>
</li>
<li class="nav">二级菜单<span></span>
<ul class="sub">
<li>第一级子标题</li>
<li>第二级子标题</li>
<li>第三级子标题</li>
<li>第四级子标题</li>
</ul>
</li>
<li class="nav">三级菜单<span></span>
<ul class="sub">
<li>第一级子标题</li>
<li>第二级子标题</li>
<li>第三级子标题</li>
<li>第四级子标题</li>
</ul>
</li>
<li class="nav">四级菜单<span></span>
<ul class="sub">
<li>第一级子标题</li>
<li>第二级子标题</li>
<li>第三级子标题</li>
<li>第四级子标题</li>
</ul>
</li>
<li class="nav">五级菜单<span></span>
<ul class="sub">
<li>第一级子标题</li>
<li>第二级子标题</li>
<li>第三级子标题</li>
<li>第四级子标题</li>
</ul>
</li>
</ul>
css部分代码:
* {
margin: 0;
padding: 0;
}
/* ul与li带有padding与margin */
/* 大盒子居中显示 */
.container {
width: 400px;
margin: 80px auto;
}
.container .nav {
list-style: none;
border: 1px solid #000;
line-height: 40px;
border-bottom: none;
//首行缩进2个字符
text-indent: 2em;
//父级是相对定位,子绝父相
position: relative;
}
.container .nav:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.container .nav:last-child {
border-bottom: 1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.container .nav>span {
background: url("./右箭头.svg") no-repeat center center;
width: 20px;
height: 20px;
display: inline-block;
//箭头给个绝对定位
position: absolute;
right: 10px;
top: 10px;
}
/* 父级隐藏 */
.sub {
display: none;
}
.sub li {
list-style: none;
background: #ccc;
border-bottom: 1px solid white;
/* cursor: pointer; */
}
.sub li:hover {
background: #00a1d6;
}
.sub li:last-child {
border-bottom: none;
}
.nav:last-child .sub li:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav.current span {
transform: rotate(90deg);
}
js部分代码:
$(function () {
$(".nav").click(function (e) {
let child = Array.from($(".container").children());
// 取到当前点击索引
let index = child.indexOf(e.target);
let subCurrent = $(".sub").eq(index);
// 取消subCurrent的默认点击事件
subCurrent.click(function () {
return false;
});
// 如果当前的副标题隐藏了,那么显示
if (subCurrent.is(":hidden")) {
subCurrent.show();
$(this).addClass("current");
} else {
// 不然隐藏
subCurrent.hide();
$(this).removeClass("current");
}
});
})