javascript - 嵌套菜单折叠与 Jquery Slidetoggle 级联

Question

我已经渲染了我无法控制的 HTML 结构，可以在下面的 jsFiddle 中看到。

我希望所有节点首先关闭，但可以通过偏移图标展开，以便将原始链接保留为导航元素。

您将看到我附加了一个图标来表示具有子项目的任何元素的切换，但我发现我当前的代码导致所有子列表也切换打开，而不仅仅是当前选定的项目:

从下面的 fiddle 中，如果有人可以提供帮助，我们将不胜感激。

<ul>
  <li><a href='#'>stuff</a></li>
   <li><a href='#'>stuff</a>
        <ul class="submenu">
            <li><a href='#'>stuff</a></li>
            <li><a href='#'>stuff</a></li>
            <li><a href='#'>stuff</a>
                <ul class="submenu">
                    <li><a href='#'>stuff</a></li>
                    <li><a href='#'>stuff</a></li>
                    <li><a href='#'>stuff</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href='#'>stuff</a></li>
</ul>

$('.submenu').hide();

$('.submenu').parents("li").prepend("<i class='glyphicon glyphicon-chevron-right'></i>");

$('.glyphicon').click(function(){
  $(this).closest('li').find('ul.submenu').slideToggle("fast");
});

https://jsfiddle.net/vhew4359/1/

Answer 1

我已经更新了你的代码。 $(this).closest('li').find('ul.submenu').slideToggle("fast"); 切换您想要的所有 .submenu仅切换直接子级或第一个。

$('.submenu').hide();

    $('.submenu').parents("li").prepend("<i class='glyphicon glyphicon-chevron-right'></i>");

    $('.glyphicon').click(function(){
    // here you were toggling all submenu m only toggling the first one 
     $(this).closest('li').find('ul.submenu').first().slideToggle("fast");
    });

更新了 fiddle https://jsfiddle.net/riazxrazor/vhew4359/2/