两级菜单和 adding/removing class

Question

我需要开发一个 two/three 级导航。当我点击任何主要项目时，所有的子项目都会出现。我需要我单击其子项的每个主要项目都只出现，并且在我推出子项的同时，class 已删除。

$(document).ready(function() {
  $(".navigation__item").click(function() {
    $(".navigation__dropdown").toggleClass("active");
  });
});

<div class="main-nav">

  <nav class="navigation-item">
    <a>first item</a>
    <div class="navigation__dropdown">
      <ul>
        <li>link1:1</li>
        <li>link1:2</li>
        <li>link1:3</li>
      </ul>
    </div>
  </nav>


  <nav class="navigation-item">
    <a>second item</a>
    <div class="navigation__dropdown">
      <ul>
        <li>link2:1</li>
        <li>link2:2</li>
        <li>link2:3</li>
      </ul>
    </div>
  </nav>


  <nav class="navigation-item">
    <a>third item</a>
    <div class="navigation__dropdown">
      <ul>
        <li>link3:1</li>
        <li>link3:2</li>
        <li>link3:3</li>
      </ul>
    </div>
  </nav>

</div>

Answer 1

$(document).ready(function() {
  $(".navigation-item").click(function() {
    $(this).find(".navigation__dropdown").toggleClass("active");
  });
});

Answer 2

Javascript

$(document).ready(function() {
  $(".navigation-item a").click(function() {

       $("div.navigation__dropdown").hide();
       $(".navigation-item").removeClass("active");
       $(this).parent().find("div.navigation__dropdown").toggle();
       $(this).parent().toggleClass('active');

  });

  $(".navigation-item").on("mouseleave",function(){
      $(this).find(".navigation__dropdown").hide();
      $(this).removeClass("active");
  });

   $(".navigation-item").on("mouseover",function(){
      $(this).find(".navigation__dropdown").show();
      $(this).addClass("active");
  });
});

CSS

.navigation__dropdown
{
  display:none;
}

.active
{
  background-color:lightyellow
}

.navigation-item a
{
  cursor:pointer;
}

工作示例在这里JSFiddle

两级菜单和 adding/removing class

two levels menu and adding/removing class

jquery

nav