需求是:
实现点击知识库收起下面的菜单,点击热点专题,使热点专题变成红色图标,应知应会变灰。
前边就不多赘述,直接代码块
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
hxzsk=
h
x
z
s
k
=
(“#hx-zsk”);
var
hxtk=
h
x
t
k
=
(“#hx-tk”);
var
hxzxxx=
h
x
z
x
x
x
=
(“#hx-zxxx”);
hxzsk.children(“.hx−fri−lis−cen”).click(function()$hxzsk.children(“ul”).toggle(););
h
x
z
s
k
.
c
h
i
l
d
r
e
n
(
“
.
h
x
−
f
r
i
−
l
i
s
−
c
e
n
”
)
.
c
l
i
c
k
(
f
u
n
c
t
i
o
n
(
)
$
h
x
z
s
k
.
c
h
i
l
d
r
e
n
(
“
u
l
”
)
.
t
o
g
g
l
e
(
)
;
)
;
hx_tk.children(“.hx-fri-lis-cen”).click(function(){
hx_tk.children(“ul”).toggle();
})
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-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的分量过多*
效果实现如下: