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

现有代码通过儿童向下搜索ul。 closest()以相反的方式穿越后代。如果您要定位的ul始终是li的直接子项，则可以使用此项：

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

Answer 2

您可以获取所点击元素的子项，然后切换它。

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

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

jQuery在click事件上定位最近的元素

2 个答案: