使用 css/javascript 的下拉菜单未删除活动下拉菜单

Dropdown menu using css/javascript not removing active dropdown

我有一个下拉菜单,单击它会显示列表项的子菜单。 一切都很好,除了 PARENT 2 子菜单,如果处于活动状态,如果我单击带有下拉菜单的 PARENT 3 link,则不会关闭。

$(function () {
    $('nav ul li a:not(:only-child)').click(function (e) {
        $(this).siblings('.nav-dropdown').toggle();
        $('.dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
    });
    $('html').click(function () {
        $('.nav-dropdown').hide();
    });

});

因此,如果我单击 PARENT 2,则会出现下拉列表。如果我然后单击 PARENT 3,它的下拉菜单也会出现(我需要 PARENT 2 下拉菜单消失)。如何确保单击任何菜单项都会删除打开的子菜单的任何实例?

<nav>
        <ul class="nav_links">
            <li><a href="#">Parent 1</a></li>
            <li><a href="#">Parent 2</a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#">Child 1</a>
                    </li>
                    <li>
                        <a href="#">Child 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#">Child 1</a>
                    </li>
                    <li>
                        <a href="#">Child 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Parent 4</a></li>
        </ul>
    </nav>

您的问题是 class dropdown 没有任何元素。

所以$('.dropdown').not($(this).siblings()).hide();没用。

试试这个:

$(function() {
  $('nav ul li a:not(:only-child)').click(function(e) {
    $(this).siblings('.nav-dropdown').toggle();
    $('.nav-dropdown').not($(this).siblings()).hide();
    e.stopPropagation();
  });

  $('html').click(function() {
    $('.nav-dropdown').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul class="nav_links">
    <li><a href="#">Parent 1</a></li>
    <li><a href="#">Parent 2</a>
      <ul class="nav-dropdown">
        <li>
          <a href="#">Child 1</a>
        </li>
        <li>
          <a href="#">Child 2</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
      <ul class="nav-dropdown">
        <li>
          <a href="#">Child 1</a>
        </li>
        <li>
          <a href="#">Child 2</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Parent 4</a></li>
  </ul>
</nav>