javascript - 如何在点击时使用 jQuery 添加标题子菜单？

Question

在我的页眉中，我有一个包含 6 个类别的列表，我想为每个类别添加一个子菜单，但仅在单击类别时才显示它。 (我想在我的 script.js 文件中只使用一个处理程序，而不是特别为每个类别添加一个处理程序。-更少的代码)

这是标题中列表的 HTML:

<ul id="menu">
  <li id="menu_item1" class="menu_item">About
    <div id="sub-menu1" class=“sub-menu”></div>
  </li>
  <li id="menu_item2" class="menu_item">Services
    <div id="sub-menu2" class=“sub-menu”></div>
  </li>
  <li id="menu_item3" class="menu_item">Portfolio
    <div id="sub-menu3" class=“sub-menu”></div>
  </li>
  <li id="menu_item4" class="menu_item">Blog
    <div id="sub-menu4" class=“sub-menu”></div>
  </li>
  <li id="menu_item5" class="menu_item">Pictures
    <div id="sub-menu5" class=“sub-menu”></div>
  </li>
  <li id="menu_item6" class="menu_item">Contacts
    <div id="sub-menu6" class=“sub-menu”></div>
  </li>
</ul>

这是 SCSS:

#menu {
  position: absolute;
  right: 25px;
  top: 25px;

  .menu_item {
      position:relative;
      font-family: $OpenSansSemibold;
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      list-style-type: none;
      display: inline-block;
      padding: 8px 16px;

    div.sub-menu {
        position:absolute;
        top:40px;
        left: 0;
        width: 200px;
        height: 116px;
        border: 1px solid green;
        background-image: url(../img/popupmenu_03.png);
        display: none;
    }


    &:hover{
        background: #62a29e;
        border-radius: 5px;
        border-bottom: 5px solid #528b86;
        cursor: pointer;

    }
  }
}

这是我到目前为止尝试过的方法，但它不起作用:

$( ".menu_item" ).each(function() {
  $(this).children().find(".sub-menu").toggle();
});

非常感谢任何帮助，谢谢!

Answer 1

只要删除 .children() 就可以了。 .children() 已经访问了直接子元素，而 .find() 将从该元素向下遍历 DOM 树。所以在你的代码中，你正在寻找被点击的 .menu_item 的直接 child 的任何 child (孙等)。 .sub-menu 不是 .menu_item 的直接子元素的子元素，而是已经是该元素；)我在这里使用 .find() 方法，因为它仍然有效，即使您的 DOM 发生变化。如果您不更改菜单的 DOM 结构，则可以安全地使用 $(this).children().toggle();

var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
  $subMenus.addClass("hidden");
  $(this).find(".sub-menu").removeClass("hidden");
});

SCSS:

#menu {

  .menu_item {

    div.sub-menu {
        ....
        &.hidden {
            display: none;
        }
    }
  }
}