Question

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

因此，例如，如果用户当前在Bootstrap上 - ＆gt;按钮 - ＆gt;颜色页面，然后所有顶级菜单应折叠，除了Bootstrap - ＆gt;按钮 - ＆gt;颜色和按钮下的表单也应该折叠。有谁知道怎么做？

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

Bootstrap树菜单 - 默认情况下折叠除了已选中

2 个答案: