手风琴菜单-仅开放一次

Question

我在尝试让我的jQuery手风琴样式菜单一次只显示一个打开的内容时遇到了一些困难，同时active类只被设置在打开的菜单选项上，而父菜单也没有被切换。

这应该是相当简单的，但我似乎有点生疏！下面是我的工作脚本的一个片段，它不遵循我想要应用的规则，这意味着您可以最大限度地展开所有菜单项，而不需要折叠任何其他菜单项。

我已经浏览了StackOverflow的答案，但没有一个我遇到的问题解决了我的问题，尽管我相信这将是一个重复的另一个问题，所以我的道歉在先进！

​

$('.SideNav .Menu li a').click(function() {
	if($(this).closest("li").children("ul").length) {
		$(this).parent().toggleClass('active');
		$(this).next().slideToggle('fast');
	}
});

ul.Menu li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
  <ul class="Menu">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">2.1 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.1.1</a></li>
          <li><a href="javascript:;">2.1.2</a></li>
          <li><a href="javascript:;">2.1.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.2 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.2.1</a></li>
          <li><a href="javascript:;">2.2.2</a></li>
          <li><a href="javascript:;">2.2.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.3</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">3 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">3.1</a></li>
        <li><a href="javascript:;">3.2</a></li>
        <li><a href="javascript:;">3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

​

澄清：

单击菜单时，所有不是同一棵树的部分--包括在同一级别上的那些--如果单击了另一个子类别，就意味着如果您在2 > 2.1 > 2.1.1上，然后单击2 > 2.1 > 2.1.2，2 > 2.1 > 2.1.1将滑动回上，单击2 > 2.2，2 > 2.1内的所有用户都将滑回。

Answer 1

我希望这能帮上忙。

​

$('.SideNav .Menu li a').click(function() {
  $(this).parent().siblings().find("ul").hide('fast');
	if($(this).closest("li").children("ul").length) {
		$(this).parent().toggleClass('active');
		$(this).next().slideToggle('fast');
	}
});

ul.Menu li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
  <ul class="Menu">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">2.1 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.1.1</a></li>
          <li><a href="javascript:;">2.1.2</a></li>
          <li><a href="javascript:;">2.1.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.2 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.2.1</a></li>
          <li><a href="javascript:;">2.2.2</a></li>
          <li><a href="javascript:;">2.2.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.3</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">3 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">3.1</a></li>
        <li><a href="javascript:;">3.2</a></li>
        <li><a href="javascript:;">3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

​