在另一个元素的父元素中选择一个元素

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”来显示“下拉菜单” -item 下拉菜单”。

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

非常感谢。

Answer 1

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

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

Answer 2

Vanilla JS 解决方案

document.querySelectorAll('.menu-toggle').forEach(element => {
    element.addEventListener('click', event => {
       event.preventDefault();
       element.parentNode.querySelector('.dropdown-menu').classList.toggle('open');
  });
});

JSFiddle 演示：https://jsfiddle.net/hp1debw7/1/

Answer 3

您可以使用closest 或parents 方法选择目标父级，然后找到下拉列表并添加类。

例子：

$('.menu-toggle').on('click', function() {
  e.preventDefault();

  $(this).closest('.nav-item dropdown').find('.dropdown-menu').toggleClass('open');
});