Question

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

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

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

从下面的小提琴中，如果有人可以帮助它，我会非常感激。

<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或第一个children的所有$('.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"); });因素。

class App extends PureComponent {
  state = {
    environment: createRelayEnvironment(),
  };

  login = () => {
    doLoginMutation({
      onSuccess: () => this.setState({ environment: createRelayEnvironment() }),
    })
  }

  ...
}

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

Answer 2

将此代码$(this).closest('li').find('ul.submenu').slideToggle("fast");替换为$(this).closest('li').children('ul.submenu').slideToggle("fast");代码

嵌套菜单collpapse与Jquery Slidetoggle级联

2 个答案: