Javascript 自举崩溃一个接一个

我对bootstrap中的折叠特性感到失望

例如，我有三个按钮。这三个按钮在同一个目标框中折叠不同的内容

当我按下第一个按钮时，div#one崩溃了。当我按下另一个按钮时，div#one应该首先向后切换，或者关闭，只有当它关闭时，另一个框才允许折叠

简单地说：一个目标区域用于折叠内容，一次打开一个折叠框

1
两个
两个
...
我被第一个按钮触发了
我被第二个按钮触发了
我被第三个按钮触发了

我知道有些事件会回调，比如

$(element).on("hidden.bs.collapse, callback);

但我并没有顿悟。

看看吧。它不使用任何回调函数，只使用可折叠的本机引导类名。这就是你想要做的吗？可以同时打开两个可折叠元素，而不是手风琴效果

HTML

Lorem ipsum dolor sit amet，奉献精英


Lorem ipsum dolor sit amet，奉献精英

您需要做的是为每个可隐藏的div提供一个共享类名，并为它们提供自己的唯一ID

  <div  class="col-md-4 col-sm-4" >
   <div id="one" class="hideMeBox">
    <img  src="http://www.starwarscats.com/wp-content/uploads/2013/02/storm-trooper-cats.jpg" style="max-width: 150px;"/>
  </div>
 </div>
 <div  class="col-md-4 col-sm-4">
  <div id="two" class="hideMeBox">
   <img  src="http://www.starwarscats.com/wp-content/uploads/2013/01/cat-costume-darth-vader.jpg" style="max-width: 150px;"/>
  </div>
 </div>
 <div  class="col-md-4 col-sm-4">
  <div id="three" class="hideMeBox">
   <img src="https://futureofstarwars.files.wordpress.com/2014/09/cat-helpmeobiwan.jpg" style="max-width: 150px;"/>
  </div>
</div>

这里有效的做法是单击按钮，在每个类上发出jquery show动画（slideDown），包含ID的元素除外。然后在目标div上发出切换动画。您不必检查/跟踪show/hide的状态，因为jquery将自动切换当前处于的任何状态

这里是一个陷阱：

当您需要在多个元素上执行这样的动画（按类而不是单个ID调用动画）时，它所做的就是将它们放入队列中

如果尝试对动画使用正常的完全回调，例如

$( ".whatever" ).slideDown( "slow", function() {
// Animation complete.
});

每次队列中的动画完成时，它都会调用animation complete函数

进入延迟对象以保存一天。在本例中，您应该查看jQuery.when（）

根据API文档：

在将多个延迟对象传递给jQuery.when（）的情况下，该方法从一个新的“主”延迟对象返回承诺，该对象跟踪已传递的所有延迟的聚合状态。当所有延迟被解决时，该方法将立即解决其主延迟，或者当其中一个延迟被拒绝时，该方法将立即拒绝该主延迟。如果已解决延迟主机，则将执行延迟主机的donecallback。传递给doneCallbacks的参数为每个延迟提供解析值，并与延迟传递给jQuery.when（）的顺序匹配

---

这里的工作示例：

我指定了我的答案。为您更新了答案和示例，如果您有任何问题，请告诉我。太好了！这正是我想要的。您的工作示例以另一种方式进行，但我可以根据自己的需要对其进行调整。非常感谢。

<div class="btn btn-large btn-info" id="hideOne">One</div>
<div class="btn btn-large btn-warning" id="hideTwo">Two</div>
<div class="btn btn-large btn-danger" id="hideThree">Three</div>

$('#hideOne').click(function() {
 $.when($('.hideMeBox').not($("#one")).slideDown("slow")).done(function() { $( "#one" ).slideToggle( "slow"); });
});

$('#hideTwo').click(function() {
 $.when($('.hideMeBox').not($("#two")).slideDown("slow")).done(function() { $( "#two" ).slideToggle( "slow"); });
});

$('#hideThree').click(function() {
  $.when($('.hideMeBox').not($("#three")).slideDown("slow")).done(function() { $( "#three" ).slideToggle( "slow"); });
});

$( ".whatever" ).slideDown( "slow", function() {
// Animation complete.
});