Javascript 带有Jquery滑动切换级联的嵌套菜单配置

我已经呈现了我无法控制的HTML结构，可以在下面的JSFIDLE中看到

我希望所有的节点在第一次关闭，但可通过一个偏移图标进行扩展，以便原始链接作为导航元素保留

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

从下面的小提琴，如果有人可以帮助它非常感谢

<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");
});

---

替换此代码$this.closest'li'。查找'ul.submenu'。slideTogglefast；与$this.li.children.ul.submenu.slideTogglefast；代码

我已经更新了您的代码。 $this.最近的'li'。查找'ul.子菜单。'slideTogglefast；切换所有。子菜单，如果您只想切换直接子菜单或第一个子菜单

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

更新小提琴