0

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;
}
4

1 に答える 1

1

このようにしてみてください：

$('ul.vertic > li > a').click(function() {    
    $("ul.vertic > li > a.active_main").removeClass("active_main");
    $(this).addClass('active_main');
    $(".show").show(100); 
});
于 2013-11-04T09:15:35.967 に答える