单击 1 个按钮可激活两个下拉菜单

Question

当我单击其中一个下拉按钮时，它会激活两个下拉菜单。我正在努力做到这一点，以便当您单击其中一个下拉按钮时，它只会激活其特定的下拉菜单。我认为在 jQuery 中使用 .each() 函数可以修复它，但我很可能使用错了。谢谢大家的帮助！

这是问题的JSFiddle链接

HTML

<div class="mobile-menu">
  <nav>
    <ul>
      <li>
        <a>Item 1</a>
        <div class="drop">
          Click To Drop
        </div>
        <ul class="nav-dropdown">
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
          <li>
            <a>Sub-item</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Item2</a>
        <div class="drop">
          Click To Drop
        </div>
        <ul class="nav-dropdown">
          <li>
            <a>Sub-item</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

SCSS

.drop {
  cursor: pointer;
}

.mobile-menu {
    ul {
        list-style-type: none;
        margin: 0;

        li {
            padding-bottom: 25px;
            position: relative;

            a {
                font-size: rem-calc(30px);
                text-transform: uppercase;
                font-weight: bold;
            }

            .nav-dropdown {
                position: relative;
                box-shadow: none;
                background: none;
                height: 100%;
                display: none;
                width: unset;

                li {
                    float: none;
                    max-width: unset;

                    a {
                        font-size: rem-calc(20px);
                        font-weight: normal;
                    }
                }
            }
        }
    }
}

.nav-dropdown-active {
    display: block !important;
}

jQuery

$('.drop').each(function() {
    $(this).click(function() {
      $('.mobile-menu .nav-dropdown').toggleClass('nav-dropdown-active');
    });
});

Answer 1

问题是：通过使用$('.mobile-menu .nav-dropdown')你选择了mobile-menu元素中的所有nav-dropdown..所以你需要使用$(this)来引用点击的drop然后.next() 获取下一个ul.nav-dropdown

• $(this).next('.nav-dropdown') 或 $(this).closest('li').find('ul')

• 同样不用.each()

---

$('.drop').click(function() {
   $(this).next('.nav-dropdown').toggleClass('nav-dropdown-active');
});

AND要关闭其他nav-dropdown，您只需使用$('.nav-dropdown').removeClass('nav-dropdown-active');

$('.drop').click(function() {
   $('.nav-dropdown').not($(this).next('.nav-dropdown')).removeClass('nav-dropdown-active');
   $(this).next('.nav-dropdown').toggleClass('nav-dropdown-active');
});

• 通过使用.not($(this).next('.nav-dropdown')) 将阻止所需的下拉列表与其他下拉列表一起删除课程。如果您的活动课程中有transition 或animation，这部分将有所帮助