Question

我使用bootstrap 3 carousel来转换像这样的项目：

<!-- here is an item, which could get as well class "active" -->
<div class="item">
  <div class="row">
     <div class="col-10 col-offset-1 text-center item-ref">
       <div class="reference">some text</div>

       <!-- collapsing item here -->
       <a href="#long-2" data-toggle="collapse" class="reference-long arr_down"></a>
       <div id="long-2" class="collapse">some collapsable text</div>

       <div class="osoba">text</div>
       <div class="firma">text</div>
     </div>
  </div>
</div>

如果 div.item 不再有活动，我需要解决问题，最终 class =＆＃34; in＆＃34; < / em>在 div＃long-2 （或最终不同的数字）转回 class =＆＃34; collapse＆＃34; 。

我现在，我可以在jquery中做到这一点，但我真的不是很好，有人可以帮助我吗？

Answer 1

我认为这就是你要找的东西。

使用内置的slide.bs.carousel事件查找即将显示的幻灯片。
在该幻灯片中找到ID以“long”开头的div元素，然后移除in类。

的Javascript

$('#quote-carousel').on('slide.bs.carousel', function (event) {
  var item = event.relatedTarget;
  $(item).find("div[id^='long']").removeClass('in').addClass('collapse');
})

http://www.bootply.com/WdWLajlCIt

旋转木马幻灯片中的Bootstrap折叠 - 如果幻灯片项未激活，则需要关闭它

1 个答案: