Question

以下是列表的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的全部内容。

我需要做以下事情：

单击具有子菜单的链接时，其子菜单会展开再次单击打开的子菜单链接时，菜单会折叠只有＆＃34; 2级＆＃34;或＆＃34; 3级＆＃34;或者＆＃34; 4级＆＃34;菜单应该立即打开。

Answer 1

我无法理解您的HTML，但是我已经为您创建了一个样本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');

一次只能打开一个子菜单

2 个答案: