【发布时间】：2016-04-12 03:13:19
【问题描述】：
我编写了一些控制单元，通过使用引导程序中的“折叠”类来切换几个容器，例如带有锚点的列表，该锚点对我的隐藏容器“href”属性具有特殊意义，这里是两个可以描述行为的列表元素的示例：
<div id="my_list">
<ul>
<li class="active">
<a onclick="return false" data-parent="#switch_tables" href="#collapse1">One</a>
</li>
<li>
<a onclick="return false" data-parent="#switch_tables" href="#collapse2">Two</a>
</li>
</div>
然后在 html 代码中我使用一些容器：
<div id="switch_tables" class="panel">
<div id="collapse1" class="collapse in"> SOME IN HERE </div>
<div id="collapse2" class="collapse"> SOMETHING ELSE</div>
</div>
所以当我使用这些东西并且列表的第一个元素处于活动状态时，第一个容器也会显示，因为我在“折叠”类之后添加了“in”类。当我切换到另一个列表元素时，第一个容器应该消失，第二个应该显示。当然，我有更多的列表链接和更多的隐藏容器，而不仅仅是 2，但这只是一个例子。我想做的事情是防止默认行为并通过单击来禁止活动元素隐藏。
所以我通过单击列表项来切换“活动”列表元素，并显示或隐藏与列表具有相同 id 的确切容器，因此容器与列表项链接，这由 js 代码完成：
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$('.collapse.in').collapse('hide');
$(to_toggle+':not(".in")').collapse('show');
});
});
现在我看到当我在列表项之间切换时，容器会正确显示和隐藏。
当我点击第二个链接时，我看到第一个容器是如何隐藏的，而第二个是如何出现的，反之亦然。
想法是，如果有打开的容器，那些有“collapse in”类的应该被js关闭，但是如何禁止关闭一个活动的容器？
例如，我单击列表中的第二个链接，我的第一个容器隐藏，第二个出现，我再次单击第二个链接，第二个容器消失，所以我在屏幕上看不到任何内容。但列表项处于活动状态。
所以问题是如何修改 js，以便一次只能有一个容器“折叠”类，并且在用户将其切换到其他容器之前，没有任何东西可以删除它，因此“in”类将移动到其他容器来自锚属性“href”并且不能在这个地方删除？
【问题讨论】：
标签： javascript jquery twitter-bootstrap-3