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')，您选择了nav-dropdown元素中的所有mobile-menu。因此，您需要使用$(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，则本部分会有所帮助

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

1 个答案: