Question

我在列表中有一个子列表，除了子项的活动/悬停颜色外，其他所有功能都正常。展开菜单/列表项时，子项具有非悬停颜色，但其余项具有活动项颜色。有没有一种方法可以同步它们，使它们不会显得不对劲，并给它们提供自己的悬停颜色？换句话说，当父项激活时，子项将获得相同的激活色，直到子项获得不同的激活色为止。我知道有人会说你在说什么。在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?，但我认为这远远超出了我的需要，并且使我感到困惑。

Answer 1

您必须在父元素中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/

悬停颜色和活动的子列表

1 个答案: