手风琴菜单 - 仅限一个开放式

Question

我试图让我的jQuery手风琴风格菜单一次只能显示一个打开的内容，而active类只在开放式菜单选项上设置，而父母也没有切换。

这应该很简单，但是我看起来有些生疏！我在我的工作脚本下面制作了一个片段，它不遵循我想要应用的规则，这意味着您可以将所有菜单项扩展到最大值而不会折叠任何其他菜单项。

我已经浏览了StackOverflow以获得答案，但是我遇到的并没有解决我的问题，但我确信这将是另一个问题的重复，所以我向你道歉！

＆＃13;

＆＃13;

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

＆＃13;

ul.Menu li ul { display:none; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

澄清：

单击菜单后，所有不属于同一树的部分我想要向上滑动，包括同一级别上的那些，如果点击了另一个子类别，则意味着您在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

我希望这会有所帮助。

＆＃13;

＆＃13;

+@

＆＃13;

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

＆＃13;

ul.Menu li ul { display:none; }

＆＃13;

＆＃13;

＆＃13;