jquery - 在另一个父元素中选择一个元素

Question

我想了解如何选择已单击元素之外的元素。

<li class="nav-item dropdown">
  <a href="javascript;" class="menu-toggle">
    <i class="fa fa-server"></i>
    <span>Server</span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a>
        <i class="fa fa-home"></i>
        <span>Item one</span>
      </a>
    </li>
  </ul>
</li>

在代码中，我想在用户单击按钮时触发链接，然后通过将类“open”添加到列表项“nav”来显示“下拉菜单” -项目下拉菜单”。

我在导航中也有多个下拉菜单，所以我不能简单地选择“下拉菜单”然后使其可见，因为它会使所有下拉菜单都可见。那么有什么办法可以做到这一点？我试图选择该元素，但它只是选择了所有元素，我无法理解它。

非常感谢。

Answer 1

您可以使用$(this).next() DEMO

$('.menu-toggle').click(function(e) {
  e.preventDefault();
  $(this).next('.dropdown-menu').toggleClass('open');
})