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中，绑定到按钮点击并插入隐藏/显示选项

$('#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 show动画（slideDown），但包含ID的元素除外。然后在目标div上发出切换动画。你不必检查/跟踪show / hide的状态，因为jQuery只会自动切换它当前所处的状态。

这是捕获：

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

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

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

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

来自延期对象以节省一天。在这种特定情况下，您应该查看jQuery.when（）

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

根据API文档：

在将多个Deferred对象传递给jQuery.when（）的情况下，该方法从一个新的＆＃34; master＆＃34;中返回Promise。延迟对象，用于跟踪已传递的所有Deferred的聚合状态。一旦所有Deferreds解决，该方法将解决其主延期，或者一旦Deferreds被拒绝，该方法将拒绝主延期。如果解析了主延迟，则执行主延迟的doneCallbacks。传递给doneCallbacks的参数为每个Deferreds提供已解析的值，并匹配Deferreds传递给jQuery的顺序.when（）

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

Answer 2

结帐this codepen。它没有使用任何回调函数，只有本机Bootstrap类名称可折叠。这是你想要做的吗？在哪里可以同时打开两个可折叠元素而不是手风琴效果？

HTML

<div class="container">
  <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>

  <br>

  <a href="#demo2" class="btn btn-info" data-toggle="collapse">Another collapsible</a>
  <div id="demo2" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>
</div>

Bootstrap一个接一个地崩溃

2 个答案: