如何更改活动菜单和子菜单项样式

Question

我正在尝试更改用户选择的活动菜单/子菜单的颜色。

例如，当点击Sub11时， Link 1和Sub11都会变成red 。 同样，当点击Sub22时， Link 2和Sub22将是red 。

 ul a { cursor: pointer; } .active { color:red;}

 <ul> <li class="active"><a>Link 1</a> <ul> <li><a>Sub11</a></li> <li><a>Sub12</a></li> </ul> </li> <li><a>Link 2</a> <ul> <li><a>Sub21</a></li> <li><a>Sub22</a></li> </ul> </li> <li><a>Link 3</a></li> </ul>

Answer 1

尝试使用 jquery 这段代码：

$('.link > a').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('.submenu > li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    $(this).parent('ul').prev('a').addClass('active');

});

解释：

第一部分：每当您点击.link项目时，您都会删除所有其他活动项目并将点击的项目设置为活动项目。

第二部分：每当您点击一个子菜单项时，您就会从前一项中删除活动状态并将其设置为单击的子菜单项及其前身.link项

您必须像这样将类link和submenu添加到您的 html 中：

<ul>
 <li class="link">
     <a class="active">Link 1</a>
     <ul class="submenu">
         <li><a>Sub11</a></li>
         <li><a>Sub12</a></li>
     </ul>
 </li>
 <li class="link">
     <a>Link 2</a>
     <ul class="submenu">
         <li><a>Sub21</a></li>
         <li><a>Sub22</a></li>
     </ul>
 </li>
 <li class="link"><a>Link 3</a></li>
</ul>

这是一个小提琴