当链接单击-jQuery时，第二层下拉列表将隐藏

2nd tier dropdown hides when link clicked - jQuery

本文关键字：第二层 下拉列表 隐藏 链接 单击 -jQuery      更新时间：2023-09-26

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

当我点击Dropdown 1时，你会看到Dropdown的链接，下面是Test 1&Test 2。然而，Test几乎立即消失。如何阻止这种情况的发生并始终显示Test 1&单击Dropdown 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>

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

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

这将得到a标签的父li。并确保其中的任何.sub-menu元素都未显示。不过，它仍然会隐藏其他li中的任何子菜单，我认为这是有意的。

评论如下：

//$(".sub-menu").not($(this).next()).slideUp('fast');
相关文章：