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>

在代码中，我想这样做，当用户点击按钮时会触发链接，然后它会显示“下拉菜单”，方法是将“打开”类添加到列表项“nav” -item下拉“。

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

非常感谢。

Answer 1

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

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

Answer 2

Vanilla JS解决方案

Net                 Fanout     Fanin      Load   Resistance    Pins
----------------------------------------------------------------------
SCPU_ALU_CTRL_UUT_REG_B[3]  11     1      0.17         0.00      12
----------------------------------------------------------------------

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');
});

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

3 个答案: