twitter-bootstrap - 引导树菜单 - 默认情况下折叠，除非选中

Question

我正在使用 Twitter Bootstrap 附带的树形折叠来构建我的菜单。我遇到的问题是我希望所有菜单列表默认折叠，除了我们当前所在的菜单列表。以下是菜单示例：http: //bootply.com/72086

因此，例如，如果用户当前在 Bootstrap --> Buttons --> Colors 页面上，则所有顶级菜单都应该折叠，除了 Bootstrap --> Buttons --> Colors，并且 Buttons 下的 Forms 应该是也崩溃了。有人知道怎么做吗？

Answer 1

定义点击事件后，在开头切换所有内容以关闭或折叠它。

//you already have this:
$('.tree-toggle').click(function () {
    $(this).parent().children('ul.tree').toggle(200);
}); 
//add this line:
$('.tree-toggle').parent().children('ul.tree').toggle(1000);

所以我们告诉它在开始时“做所有事情”一次，而无需等待任何人点击它。您可以将切换持续时间更改为您想要的任何内容：在我的情况下，我希望用户在页面加载时可以看到许多可用的选项，并且它提供了一个很好的动画效果。

请参阅工作示例：http ://cssdeck.com/labs/fialo63a

要保持选定的一个打开，您可以用另一个类名标记它，并在关闭所有内容后切换它以打开它。

HTML：

<li><label class="tree-toggle nav-header selected">Bootstrap</label>

Javascript：

//add this line:
$('.selected').parent().children('ul.tree').toggle(200);

..所以这可能会以一种迂回的方式出现，但我们正在折叠所有内容，然后在加载页面时展开“选定”​​的内容。注意：如果您要保持打开的“选定”部分不在顶级，那么您还必须展开其所有父项（即，将它们也标记为“选定”）。

Answer 2

尝试使用以下方法实现您的树：

.siblings()

这是一个例子：jsfiddle