嵌套菜单崩溃与Jquery Slidetoggle级联 [英] Nested menu collpapse with Jquery Slidetoggle cascading

问题描述

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

I have rendered HTML structure that I have no control over which can be seen in the jsFiddle below.

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

I would like all nodes to be closed at first but expandable via an offset icon so that the original link is preserved as a navigation element.

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

You will see I am attaching an icon to represent the toggle for any element that has subitems but I am finding my current code is causing all sub lists to also toggle open rather than just the item currently selected:

从下面的小提琴中，如果有人可以帮助它，我们将不胜感激.

From the fiddle below if anyone can assist its much appreciated.

<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/

推荐答案

我对您的代码进行了一些更新. $(this).closest('li').find('ul.submenu').slideToggle("fast");切换所有要仅切换直接children或第一个.submenu的.submenu事实.

I have updated your code a bit. $(this).closest('li').find('ul.submenu').slideToggle("fast"); toggles all the .submenu infact you want to toggle only the direct children or the first one.

$('.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");
    });

更新的小提琴 https://jsfiddle.net/riazxrazor/vhew4359/2/

这篇关于嵌套菜单崩溃与Jquery Slidetoggle级联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！