一次只能打开一个子菜单

Question

小提琴：http://jsfiddle.net/s125paua/

以下是列表的html

<div id="div1">

<ul class="nav level-1">

<li class="has-submenu"><a href="#">Menu Level1</a>
    <ul class="level-2">
        <li class="has-submenu"><a href="#">Menu-Level2</a>
        <ul class="level-3">
                        <li class="has-submenu"><a href="#">Menu Level3</a>
            <ul class="level-4">
                        <li><a href="#">Menu-Level4</a></li>
                        <li><a href="#">Menu-Level4</a></li>
                    </ul>
            </li>
                        <li class="has-submenu"><a href="#">Menu-Level3</a>
            <ul class="level-3">
                        <li><a href="#">Menu-Level4</a></li>
                        <li><a href="#">Menu-Level4</a></li>
                    </ul></li>
                    </ul>
        </li>

        <li class="has-submenu"><a href="#">Menu-Level2</a>
            <ul class="level-3">
                <li><a href="#">Menu-Level3</a></li>
                <li class="has-submenu"><a href="#">Menu-Level3</a>

                    <ul class="level-4">
                        <li><a href="#">Menu-Level4</a></li>
                        <li><a href="#">Menu-Level4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li class="has-submenu"><a href="#">Menu-Level1</a>
    <ul class="level-2">
        <li><a href="#">Menu-Level2</a></li>
        <li><a href="#">Menu-Level2</a></li>
    </ul>
</li>

 </ul>
</div>

我参考了下面的Managing open and closed menus on custom accordion navigation

这里使用了nav-open类，但它根本不是html的一部分。

我需要做以下事情：

当单击具有子菜单的链接时，其子菜单会展开，再次单击打开的子菜单的链接时，菜单会折叠，此时应立即打开"level 2“、"level 3”或"level 4“菜单。

Answer 1

我不能理解你的网页，但是我已经为你创建了一个样本，这里是demo。

HTML

<ul id="menumain">
   <li class="MenuLevelOne MenuDD"><a href="#" onclick="return false;">History</a>
  <ul class="MenuLevelTwo">
     <li><a href="#">Brief History</a></li>
     <li><a href="#">Brandon at War</a></li>
     <li><a href="#">Heritage Centre</a></li>
     <li><a href="#">Historic Maps</a></li>
   </ul>
 </li>
     <li class="MenuLevelOne MenuDD"><a href="#" onclick="return false;">Community</a>
     <ul class="MenuLevelTwo">
     <li><a href="#">Brief History</a></li>
     <li><a href="#">Brandon at War</a></li>
     <li><a href="#">Heritage Centre</a></li>
     <li><a href="#">Historic Maps</a></li>
    </ul>
   </li>
</ul>

JAVASCRIPT

$(".MenuDD").click(function () {
$(this).siblings().find("ul").hide();
$(this).find("ul").toggle();
$(this).siblings().removeClass('darkbg');
$(this).toggleClass("darkbg");
});

Answer 2

好吧，如果我现在明白了..。您正在尝试关闭所有兄弟，然后只打开单击的子菜单，将您的js更改为：

            $('.has-submenu > a').on('click', function (e) {
            e.preventDefault();

            $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle();

            $(this).parent().siblings().find('> ul > li').slideUp();


        });

编辑:在最后一行之后添加以下内容以修复切换类

$(this).parent().siblings().removeClass('nav-open');