jquery - 如何同时显示 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); 
});