jquery - jQuery在点击事件上定位最近的元素

Question

我在网上找到了一段 jQuery 代码，几乎可以满足我的要求。

(function($) {
  $.fn.toggleMenu = function() {
    var menu = $(this).find('ul');
    menu.hide();

    $(this).click(function(e) {
      e.stopPropagation();
      menu.toggle();
    });
  }
});

我可以像这样触发该功能：

$('li.grouped').toggleMenu();

我遇到的问题是，当我单击列表项时，当有多个下拉菜单时，它们都会被切换。它应该只在我单击的 li 元素下切换 ul.dropdown。

我试过这样的代码：

el.click(function(e) {
  e.stopPropagation();
  menu.closest('ul.dropdown').toggle();
});

但这并没有多大作用。

HTML 结构与此类似：

<div class="main-menu">
  <ul class="menu">
    <li class="grouped menu-item">
      <ul class="dropdown">...</ul>
    </li>
    <li class="grouped menu-item">
      <ul class="dropdown">...</ul>
    </li>
    <li class="menu-item">...</li>
    <li class="menu-item">...</li>
    <li class="menu-item">...</li>
    <li class="menu-item">...</li>
  </ul>
</div>

任何人都可以向我解释如何更改我的代码，使其切换为正确的 ul。

谢谢

Answer 1

现有代码向下遍历子项以找到uls。closest()以另一种方式遍历，通过后代。如果ul您要定位的始终是 的直接子级，则li可以使用：

$(this).children('ul');

Answer 2

您可以获取单击元素的子元素并进行切换。

$(this).click(function(e) {
    var $item = $(e.target).children();
    item.toggle();
});

进一步阅读：
http ://api.jquery.com/children/