javascript - 单击链接时隐藏第二层下拉菜单 - jQuery

Question

我有一个简单的 Accordion 菜单:https://jsfiddle.net/arunpjohny/x3ak0ueg/

当我单击 Dropdown 1 时，您会看到 Dropdown 的链接以及 Test 1 和 Test 2< 的链接。但是，Test 几乎立即消失了。如何阻止这种情况发生并在单击 Dropdown 1 时始终显示 Test 1 和 Test 2？

换句话说，.sub-menu .sub-menu 是隐藏的。

感谢您的帮助。

$(document).ready(function ($) {
    var $toggles = $('.inline').find('.navtoggle').click(function () {
        $toggles.not(this).removeClass('selected')
        
        //Expand or collapse this panel
        $(this).toggleClass('selected').next().slideToggle('fast');
        
        //Hide the other panels
        $(".sub-menu").not($(this).next()).slideUp('fast');
        
    });
});

  .accordion-toggle {
      cursor: pointer;
  }
  .sub-menu {
      display: none;
  }
  .sub-menu .sub-menu {
      display: block;
  }
  .selected {
      background-color: red;
  }

<nav class="medium-8 columns primary menu">
    <ul class="inline naked">
        <li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li>						
        <li id="menu-item-74" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="#" class="navtoggle">Dropdown 1</a>
            <ul class="sub-menu">
                <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/test/wordpress/?page_id=45">Dropdown </a>
                    <ul class="sub-menu">
                        <li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/test/wordpress/?page_id=47">Test 1</a></li>
                        <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/test/wordpress/?page_id=49">Test 2</a></li>
                    </ul>
                </li>
            </ul>				
            <li id="menu-item-79" class="primary-item menu-item menu-item-type-post_type menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><a href="#" class="navtoggle">Dropdown 2</a></li>
        </li>
    </ul>
</nav>

Answer 1

你可以把最后一行改成这个

$(".sub-menu").not($(this).parent().find('.sub-menu')).slideUp('fast');

它将获取 a 标签的父级 li。并确保不显示其中的任何 .sub-menu 元素。不过，它仍会隐藏其他 li 中的所有子菜单，我假设这是故意的。