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

【问题标题】：Bootstrap Tree Menu - Collapse by Default Except Selected引导树菜单 - 默认情况下折叠，除非选中
【发布时间】：2013-08-14 00:38:51
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap menu tree collapse

【解决方案1】：

定义点击事件后，在开头切换everything来关闭或折叠它。

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

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

【讨论】：

【解决方案2】：

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

.siblings()

这里是一个例子：jsfiddle

【讨论】：