首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >子列表的悬停颜色和活动

子列表的悬停颜色和活动
EN

Stack Overflow用户
提问于 2018-12-13 05:59:36
回答 1查看 100关注 0票数 1

我在列表中有一个子列表,除了子项的活动/悬停颜色之外,一切都运行正常。展开菜单项/列表项时,子项具有非悬停颜色,但项的其余部分具有活动项颜色。有没有一种同步它们的方法,这样它们就不会看起来不对劲,并给它们自己的悬停颜色?换句话说,当父项目获得活动时,子项获得相同的活动颜色,直到子项获得不同的活动颜色。我知道有人会说你到底在说什么。在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?,但我认为它远远超出了我的需要,并使我感到困惑。

EN

回答 1

Stack Overflow用户

发布于 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/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53752017

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档