html
<ul class="mainMenu">
<li class="menuItem">
<a href="media.html">
<img src="images/media_01.png" class="unSelected">
<img src="images/media_02.png" class="selected">
<span>媒体组</span>
</a>
</li>
<li class="menuItem">
<a href="">
<img src="images/media_03.png" class="unSelected">
<img src="images/media_04.png" class="selected">
<span>媒体大屏</span>
</a>
</li>
<li class="menuItem isSecond">
<a href="javascript:void()" class="">
<img src="images/data_01.png" class="unSelected">
<img src="images/data_02.png" class="selected">
<span>数据服务</span>
<img src="images/down.png" class="down">
<img src="images/up.png" class="up">
</a>
<div class="dataServicesMenuDiv secondMenu">
<div class="dataServicesMenu">
<ul>
<li class="item pandect">
<a href="dataServices_pandect.html">总览</a>
</li>
<li class="item earlyWarning earlyWarningData">
<a href="dataServices_earlyWarning.html">预警</a>
</li>
<li class="item task taskSetting">
<a href="dataServices_task.html">任务</a>
</li>
<li class="item topic topicMarker topicSetting dataMessage">
<a href="dataServices_topic.html">话题</a>
</li>
<li class="item monitoring">
<a href="dataServices_monitoring.html">监控</a>
</li>
<li class="item recordsCenter">
<a href="dataServices_recordsCenter.html">数据中心</a>
</li>
<li class="item DS">
<a href="dataServices_DS">数据集</a>
</li>
<li class="item globalQuery">
<a href="dataServices_globalQuery.html">全域查询</a>
</li>
<li class="item list">
<a href="dataServices_list.html">榜单</a>
</li>
<li class="item customList">
<a href="dataServices_customList.html">自定义榜单</a>
</li>
<li class="item areaList">
<a href="dataServices_areaList.html">区域榜单</a>
</li>
</ul>
</div>
</div>
</li>
<li class="menuItem">
<a href="">
<img src="images/hot_01.png" class="unSelected">
<img src="images/hot_02.png" class="selected">
<span>热点资讯</span>
</a>
</li>
</ul>
css
/* 主导航 */
.mainMenuDiv {
background-color: #fff;
margin-right: 5px;
width: 128px !important;
height: 100vh;
/* overflow-y: auto; */
/* box-shadow: rgba(0, 0, 0, 0.35) 5px 5px 5px;*/
}
.mainMenu {
display: flex;
flex-direction: column;
position: fixed;
top: 50px;
left: 0;
z-index: 1;
background-color: #fff;
height: 100%;
overflow-y: auto;
padding-bottom: 120px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.mainMenu::-webkit-scrollbar {
display: none
}
.mainMenu>li.menuItem {
margin-top: 10px;
font-weight: bold;
}
.mainMenu>li.menuItem>a {
width: 120px;
color: #999;
width: 125px;
height: 56px;
/* text-align: center; */
line-height: 56px;
display: flex;
align-items: center;
border-left: 6px solid transparent;
}
.mainMenu .unSelected,
.mainMenu .selected {
width: 15px;
/* height: 15px; */
margin: 0 5px 0 10px;
}
.mainMenu .down,
.mainMenu .up {
margin-left: 10px;
}
.mainMenu .up {
width: 14px;
display: none;
}
.mainMenu .down {
width: 16px;
}
.mainMenu span {
white-space: nowrap;
}
.mainMenu li a>img.selected {
display: none;
}
.mainMenu>li.active>a {
color: #347fff;
background-color: #e9edf3 !important;
border-left: 6px solid #347fff;
}
.mainMenu>li.active a .selected {
display: block;
}
.mainMenu>li.active a .unSelected {
display: none;
}
.mainMenu>li>a:hover {
background-color: #e9edf3;
}
/* 数据服务 */
.dataServicesMenuDiv {
display: none;
width: 100%;
}
.dataServicesMenu {
border-top: 1px solid #f7f2f2;
}
.dataServicesMenu .item a {
/* width: 120px; */
height: 45px;
padding-left: 40px;
line-height: 45px;
display: block;
color: #999;
font-size: 13px;
border-left: 6px solid transparent;
}
.dataServicesMenu .item a:hover {
/* background-color: rgb(192, 194, 196); */
color: #347fff;
/* background-color: #e9edf3 !important; */
font-weight: bold;
}
.dataServicesMenu .item.active a {
/* background-color: rgb(192, 194, 196); */
color: #347fff;
font-weight: bold;
/* background-color: #e9edf3 !important; */
}
js
$(".mainMenuDiv .menuItem>a").on("click", function(event) {
if ($(this).parent().hasClass("isSecond")) {
event.preventDefault();
$(this).parent().children(".dataServicesMenuDiv").slideToggle();
if ($(this).children("img.up").css("display") == "none") {
$(this).children("img.down").css("display", "none");
$(this).children("img.up").fadeToggle();
} else {
$(this).children("img.up").css("display", "none");
$(this).children("img.down").fadeToggle();
}
}
})