twitter-bootstrap Bootstrap 树菜单 - 默认情况下折叠，选定的除外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18191436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tree Menu - Collapse by Default Except Selected
提问by Guest
I'm using the tree collapse that comes with Twitter Bootstrap to build my menu. The issue I'm having is that I want all menu lists to be collapsed by default except for the one we are currently on. Here is an example of the menu: http://bootply.com/72086
我正在使用 Twitter Bootstrap 附带的树折叠来构建我的菜单。我遇到的问题是我希望默认情况下折叠所有菜单列表，除了我们当前所在的菜单列表。以下是菜单示例：http: //bootply.com/72086
So for example, if the user is currently on the Bootstrap --> Buttons --> Colors page, then all top level menus should be collapsed except for the Bootstrap --> Buttons --> Colors, and the Forms under Buttons should be collapsed as well. Anyone know how to do this?
所以举个例子，如果用户当前在 Bootstrap --> Buttons --> Colors 页面，那么除了 Bootstrap --> Buttons --> Colors 之外的所有顶层菜单都应该被折叠，并且 Buttons 下的 Forms 应该是也崩溃了。有人知道怎么做吗？
回答by Nikhil VJ
After defining the on-click event, Toggle everythingat the beginning to close or fold it.
定义点击事件后，在开始处切换所有内容以关闭或折叠它。
//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);
So we're telling it to "do everything" once at the beginning without waiting for anyone to click on it. You could change the toggle duration to whatever you want : in my case I want the user to get a glimpse of the many options available when the page loads, plus it gives a nice animation effect.
所以我们告诉它在开始时“做所有事情”一次，而不用等待任何人点击它。您可以将切换持续时间更改为您想要的任何时间：在我的情况下，我希望用户在页面加载时瞥见许多可用选项，而且它提供了很好的动画效果。
See working example: http://cssdeck.com/labs/fialo63a
请参阅工作示例：http: //cssdeck.com/labs/fialo63a
To keep a selected one open, you could mark it with another class name and toggle that to open it after closing everything.
要保持选定的一个打开，您可以用另一个类名标记它，并在关闭所有内容后切换它以打开它。
HTML:
HTML：
<li><label class="tree-toggle nav-header selected">Bootstrap</label>
Javascript:
Javascript：
//add this line:
$('.selected').parent().children('ul.tree').toggle(200);
..so this might come off as a round-about way, but we're folding everything, and then unfolding the "selected" ones when we load the page. Note: If your "selected" section that you want to keep open is not at top-level, then you're going to have to unfold all its parents also (ie, mark them also as "selected").
..所以这可能会以一种迂回的方式出现，但我们正在折叠所有内容，然后在加载页面时展开“选定”的内容。注意：如果您要保持打开的“已选择”部分不在顶级，那么您还必须展开其所有父项（即，将它们也标记为“已选择”）。
