如何同时显示 2 个不同的类 li.active

Question

在菜单中，我试图使用 Jquery 将主级别与子级别样式不同，但按下子菜单会使类活动从主级别中消失？

我只是不明白 - 有人可以解释为什么吗？下面是一些基本代码：

<ul class="vertic">  
  <li><a href="#">items</a>
      <ul class="show">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
      </ul> 
  </li>
</ul> 
// ACTIVE-CLASS on MAIN 
$('ul.vertic li a').click(function() {
    $("ul.vertic li a.active_main").removeClass("active_main");
    $(this).addClass('active_main');
    $(".show").show(100); 
});
// ACTIVE-CLASS on SUB 
$('ul.vertic li ul.show li a').click(function() {
    $("ul.vertic li ul li a.active_sub").removeClass("active_sub");
    $(this).addClass('active_sub'); 
});
nav ul li a.active_main  {
    border-bottom: 4px solid red;
    width: 100%;
    color: red;
}
nav ul.vertic li ul li a.active_sub {
    border-bottom: 4px solid green;
    width: 100%;
    color: green;
}

Answer 1

尝试如下：

$('ul.vertic > li > a').click(function() {    
    $("ul.vertic > li > a.active_main").removeClass("active_main");
    $(this).addClass('active_main');
    $(".show").show(100); 
});