Question

我需要开发一个两层/三层导航。当我点击任何主要项目时，所有潜艇都会出现。我需要点击其子项的每个主要项目才会出现，同时当我推出子项时，该类被删除。

$(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

两级菜单和添加/删除类

2 个答案: