根据需求写一个侧边栏有两级菜单

需求是：
实现点击知识库收起下面的菜单，点击热点专题，使热点专题变成红色图标，应知应会变灰。
前边就不多赘述，直接代码块
html：`

• 
  
  
  
  
  
  
  知识库
  
  

                 <!-- 三级菜单的显示隐藏 -->
          <ul class="hx-sec-meau"> 
                <li class="hx-sec-meau-lis">
                        <span class="hx-sec-meau-tb"></span>
                        <span class="hx-sec-meau-wd">应知应会</span>
                </li>
                <li class="hx-sec-meau-lis">
                        <span class="hx-sec-meau-tb"></span>
                        <span class="hx-sec-meau-wd">热点专题</span>
                </li>
                <li class="hx-sec-meau-lis">
                        <span class="hx-sec-meau-tb"></span>
                        <span class="hx-sec-meau-wd">理论研究</span>
                </li>
            </ul>
            </li>
        <li class="hx-fri-lis" id="hx-tk">
            <div class="hx-fri-lis-cen"> 
                <span class="hx-fri-lis-tp">
                    <img src="images/hx-zsk2.png"alt="">
                </span>
                <span class="hx-fri-lis-tit">
                    题库
                </span>
            </div>

            <!-- 三级菜单的显示隐藏 -->
          <ul class="hx-sec-meau"> 
                    <li class="hx-sec-meau-lis">
                        <span class="hx-sec-meau-tb"></span>
                        <span class="hx-sec-meau-wd">题目管理</span>
                    </li>
                    <li class="hx-sec-meau-lis">
                            <span class="hx-sec-meau-tb"></span>
                            <span class="hx-sec-meau-wd">分类管理</span>
                    </li>
                    <li class="hx-sec-meau-lis">
                            <span class="hx-sec-meau-tb"></span>
                            <span class="hx-sec-meau-wd">标签管理</span>
                    </li>
                    <li class="hx-sec-meau-lis">
                            <span class="hx-sec-meau-tb"></span>
                            <span class="hx-sec-meau-wd">试卷管理</span>
                    </li>
                    <li class="hx-sec-meau-lis">
                            <span class="hx-sec-meau-tb"></span>
                            <span class="hx-sec-meau-wd">统计分析</span>
                    </li>
          </ul>

        </li>
        <li class="hx-fri-lis" id="hx-zxxx">
            <div class="hx-fri-lis-cen"style="text-align:left;padding-left: 81px;">
                 <span class="hx-fri-lis-tp">
                     <img src="images/hx-zsk3.png" alt="">
                    </span>
                    <span class="hx-fri-lis-tit">
                        在线学习与考试
                    </span>
                </div>

                 <!-- 三级菜单的显示隐藏 -->
          <ul class="hx-sec-meau"> 
                <li class="hx-sec-meau-lis">
                     <span class="hx-sec-meau-tb"></span>
                     <span class="hx-sec-meau-wd">自我测评</span>
                    </li>

            </ul>
            </li>
    </ul>
</div>

`

css `ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.hx-zsk-right{
width: 300px;
height: 835px;
background-color: #fff;
float: right;
}

.hx-zsk-right .hx-zsk-fri{
width: 100%;
height: 100%;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis{
width: 100%;

position: relative;
box-sizing: border-box;

}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-fri-lis-cen{
margin: auto;
height: 53px;
padding-top: 10px;
line-height: 40px;
text-align: center;
border-bottom:2px red solid;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-fri-lis-cen>span{
display: inline-block;
height: 40px!important;
line-height: 40px;
margin-right: 5px;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-fri-lis-cen .hx-fri-lis-tit{
position: absolute;
top: 8px;
font-family: MicrosoftYaHei;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 2px;
color: #bc0103;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-fri-lis-cen>span>img{
width: auto;
height: 100%;
}

/* 三级菜单的样式 */

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau{
width: 100%;
display: none;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-sec-meau-lis{
width: 100%;
height: 65px;
position: relative;
box-sizing: border-box;
border-bottom: lightgray 1px solid;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-sec-meau-lis .hx-sec-meau-tb{
width: 26px;
height: 26px;
float: left;
margin-left: 20px;
margin-top: 20px;
background: url(../images/hx-zs.png);
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-sec-meau-lis .hx-sec-meau-wd{
width: 100px;
height: 22px;
float: left;
margin-top: 20px;
margin-left: 8px;
font-family: MicrosoftYaHei;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 22px;
letter-spacing: 2px;
color: #333333;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-active{
width: 100%;
height: 65px;
position: relative;
box-sizing: border-box;
border-bottom: lightgray 1px solid;
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-active .hx-sec-meau-tb{
width: 26px;
height: 26px;
float: left;
margin-left: 20px;
margin-top: 20px;
background: url(../images/hx-zs1.png);
}

.hx-zsk-right .hx-zsk-fri .hx-fri-lis .hx-sec-meau .hx-active .hx-sec-meau-wd{
width: 100px;
height: 22px;
float: left;
margin-top: 20px;
margin-left: 8px;
font-family: MicrosoftYaHei;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 22px;
letter-spacing: 2px;
color: red;
}

js代码：` var $hx_zsk=$(“#hx-zsk”);
var $hx_tk=$(“#hx-tk”);
var $hx_zxxx=$(“#hx-zxxx”);
$hx_zsk.children(“.hx-fri-lis-cen”).click(function(){ $hx_zsk.children(“ul”).toggle(); });$hx_tk.children(“.hx-fri-lis-cen”).click(function(){
$hx_tk.children(“ul”).toggle(); })$hx_zxxx.children(“.hx-fri-lis-cen”).click(function(){
$hx_zxxx.children(“ul”).toggle();
})

$(“.hx-sec-meau-lis”).click(function(){$(“.hx-active”).removeClass(“hx-active”).addClass(“hx-sec-meau-lis”);
$(this).removeClass(“hx-sec-meau-lis”).addClass(“hx-active”);
})`

*实现原理：因为有三个菜单，还要实现跳转，本身就是往框架里加，所以不宜再用插件去调，而且有时间就自己原生写了一个。 就是根据知识库下面的应知应会等都是一个li标签，而且相同的具有同一个类名，这样写起来就方便很多，首先点击时先移除红色的类名再加上统一类名，先把自己上面统一类名移除再添加这个类名。
类名下面的样式写两份，相同不同的都要写出来。
缺点：二级菜单的图标必须是一样的，不一样的话可能css的分量过多*

效果实现如下：