image.png
html
<div class="main_left_menu">
<ul class="menu_ul">
<li class="menu_title">
<a class="menu_item menu_item1" href="####">
<span class="menu_span_top"></span>
机房一
</a>
<ul class="menu_content" style="display: block;">
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
温湿度
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/shuidi.png" alt="">
漏水
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/jiashiqi.png" alt="">
UPS
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
空调
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/xinfeng.png" alt="">
新风机
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
电池
</a>
</li>
</ul>
</li>
<li class="menu_title">
<a class="menu_item menu_item1" href="####">
<span class="menu_span_down"></span>
机房二
</a>
<ul class="menu_content">
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
温湿度
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/shuidi.png" alt="">
漏水
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/jiashiqi.png" alt="">
UPS
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
空调
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/xinfeng.png" alt="">
新风机
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
电池
</a>
</li>
</ul>
</li>
<li class="menu_title">
<a class="menu_item menu_item1" href="####">
<span class="menu_span_down"></span>
机房三
</a>
<ul class="menu_content">
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
温湿度
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/shuidi.png" alt="">
漏水
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/jiashiqi.png" alt="">
UPS
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
空调
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/xinfeng.png" alt="">
新风机
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
电池
</a>
</li>
</ul>
</li>
<li class="menu_title">
<a class="menu_item menu_item1" href="####">
<span class="menu_span_down"></span>
机房四
</a>
<ul class="menu_content">
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
温湿度
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/shuidi.png" alt="">
漏水
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/jiashiqi.png" alt="">
UPS
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
空调
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/xinfeng.png" alt="">
新风机
</a>
</li>
<li>
<a class="menu_item menu_item2" href="####">
<img src="./img/kongtiao.png" alt="">
电池
</a>
</li>
</ul>
</li>
</ul>
</div>
css
.main_left_menu {
width: 94%;
height: calc(100% - 18px);
overflow: hidden;
}
.menu_ul {
width: 100%;
height: 94%;
margin: 25px 0 25px 25px;
overflow: auto;
}
.menu_title {
margin-bottom: 5px;
line-height: 26px;
width: 100%;
}
.menu_item {
color: #fff;
font-size: 16px;
position: relative;
}
.menu_item1 {
display: inline-block;
padding: 10px 10px 10px 25px;
background-color: rgba(0, 114, 151, 0.4);
width: calc(100% - 42px);
}
.menu_content {
width: calc(100% - 12px);
margin: 5px 0;
border: 1px solid #007297;
border-radius: 10px;
display: none;
}
.menu_content li {
border-bottom: 1px solid #007297;
margin: 0px auto;
padding: 10px 40px;
}
.menu_content li:last-child {
border: 0;
}
.menu_span_top {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #007297;
position: absolute;
left: 2%;
top: 41%;
}
.menu_span_down {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #007297;
position: absolute;
left: 2%;
top: 41%;
}
js
$(".menu_title .menu_item1").click(function () {
$(this).next(".menu_content").slideToggle();//实现二级菜单的展开收缩功能
$(this).find("span").toggleClass("menu_span_down");//实现菜单点击时图标的转换效果
$(this).find("span").toggleClass("menu_span_top");
})
