Question

我有一个简单的手风琴菜单：https://jsfiddle.net/arunpjohny/x3ak0ueg/

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

换句话说，隐藏了.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).next()).slideUp('fast');

Answer 2

您可以将最后一行更改为此

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

哪个会获得li标记的父a。并确保未显示其中的任何.sub-menu元素。它仍会隐藏其他li中的任何子菜单，我假设这是意图。

点击链接时，第二层下拉隐藏 - jQuery

2 个答案: