javascript - Bootstrap相继崩溃

Question

我对 bootstrap 的折叠功能感到绝望。

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

当我按下第一个按钮时，div #one 会折叠。当我按下另一个按钮时，div #one 应首先切换回来或关闭，并且只有当它关闭时，才允许另一个框折叠。

简单地说:折叠内容的一个目标区域，一次打开一个折叠框。

<button class="toggler" data-toggle="collapse" data-target="#one">One</button>
<button class="toggler" data-toggle="collapse" data-target="#two">Two</button>
<button class="toggler" data-toggle="collapse" data-target="#thr">Two</button>

...

<div class="here-is-only-space-for-one-at-a-time">
  <div class="collapse" id="one">
    <h1>I was triggered by the first button</h1>
  </div>
  <div class="collapse" id="two">
    <h1>I was triggered by the second button</h1>
  </div>
  <div class="collapse" id="thr">
    <h1>I was triggered by the third button</h1>
  </div>
</div>

我知道有些事件带有回调

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

但我没有获得顿悟。

Answer 1

您需要做的是为每个可隐藏的 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>

定义控制按钮:

<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>

在 Jquery 中，绑定(bind)到按钮点击并插入隐藏/显示选项

$('#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"); });
});

您在这里有效执行的是单击按钮时，在每个类上发出 jquery 显示动画 (slideDown)，但包含 ID 的元素除外。然后在目标 div 上发出切换动画。您不必检查/跟踪显示/隐藏的状态，因为 jQuery 只会自动切换它当前所处的状态。

这里是要点:

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

如果您尝试在动画上使用正常的完整回调，例如

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

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

延迟对象来拯救世界。在这种特定情况下，您应该查看 jQuery.when()

https://api.jquery.com/jquery.when/

根据 API 文档:

在将多个 Deferred 对象传递给 jQuery.when() 的情况下，该方法从新的“主”Deferred 对象返回 Promise，该对象跟踪已传递的所有 Deferred 的聚合状态。一旦所有 Deferred 解析，该方法将解析其主 Deferred，或者一旦其中一个 Deferred 被拒绝，该方法将拒绝主 Deferred。如果主 Deferred 已解析，则执行主 Deferred 的 didCallbacks。传递给 didCallbacks 的参数提供每个 Deferreds 的解析值，并与传递给 jQuery.when() 的 Deferreds 中的顺序匹配

这里的工作示例:https://jsfiddle.net/qs4v999p/9/