我在列表中有一个子列表,除了子项的活动/悬停颜色之外,一切都运行正常。展开菜单项/列表项时,子项具有非悬停颜色,但项的其余部分具有活动项颜色。有没有一种同步它们的方法,这样它们就不会看起来不对劲,并给它们自己的悬停颜色?换句话说,当父项目获得活动时,子项获得相同的活动颜色,直到子项获得不同的活动颜色。我知道有人会说你到底在说什么。在Fiddler链接上更容易看到:https://jsfiddle.net/morgenweck/46oq2x18/13/
.lmainlist ul li a {
color: #2f6176;
text-decoration: none;
}
.leftmain ul li:hover {
background-color: #b5d0d8;
}
.lmainlist ul li:active {
background-color: #878b8c;
}
ul.collapseable{
display: none;
}
我看过Retain color of main-menu when hovering sub-menu?,但我认为它远远超出了我的需要,并使我感到困惑。
发布于 2018-12-13 06:31:12
您必须在父元素中添加toggleClass
,并在CSS中添加活动状态。
JavaScript:
$(".lmainlist > li > a").click(function(){
$(this).parent().toggleClass("active");
if($(this).parent().hasClass("active")){
$(this).next(".collapseable").slideDown();
}
else{
$(this).next(".collapseable").slideUp();
}
});
CSS:
ul.lmainlist li.active {
background-color: #b5d0d8;
}
这里有一个有效的工具:https://jsfiddle.net/upcx2r07/
https://stackoverflow.com/questions/53752017
复制相似问题