Bootstrap Tree菜单-默认情况下折叠，但选定项除外

Question

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

例如，如果用户当前在Bootstrap --> Buttons -> Colors页面上，则除Bootstrap --> Buttons -> Colors之外的所有顶级菜单都应折叠，按钮下的窗体也应折叠。有人知道怎么做吗？

Answer 1

定义on-click事件后，切换开头的所有内容以关闭或折叠它。

//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);

..so这可能看起来像是一种绕来绕去的方式，但我们是在折叠所有内容，然后在加载页面时展开“选定”的内容。注意:如果您想要保持打开的“选定”部分不在顶层，那么您将不得不同时展开其所有父级(即，将它们也标记为“选定”)。

Answer 2

尝试使用以下命令实现您的树：

.siblings()

下面是一个示例：jsfiddle