事件差异引导崩溃 [英] Event difference bootstrap collapse

问题描述

此刻我的代码就像

$('.collapse').on('show.bs.collapse',function(){
   $('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-menu-up');
});
$('.collapse').on('hide.bs.collapse',function(){
   $('.glyphicon-menu-up').removeClass('glyphicon-menu-up').addClass('glyphicon-plus');
});

我的HTML代码看起来像（例如）

and my HTML Code look like (for example)

<span class="glyphicon glyphicon-plus" data-toggle="collapse" 
      data-target="#a" aria-expanded="false" aria-controls="a"></span>
<div class="collapse" id="a"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" 
      data-target="#b" aria-expanded="false" aria-controls="b"></span>
<div class="collapse" id="b"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" 
      data-target="#c" aria-expanded="false" aria-controls="c"></span>
<div class="collapse" id="c"></div>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" 
      data-target="#d" aria-expanded="false" aria-controls="d"></span>
<div class="collapse" id="d"></div>

现在发生的事情是

• 当我点击调用函数或展开div时，所有span类改为glyphicon-menu-up（由消费引发）

我想做的事情是

• 当我点击其中一个来调用函数或扩展div我需要只有一个span类我点击更改班级

可选

• 当我点击另一个跨度（或扩展其他div）时，我会在我使用时恢复到正常（非点击）状态之前点击span / div

• when i click another span (or to expand other div) the span/div i click before back to normal (not click) states while i'm using

$('.collapse').click(function(e){
   e.stopPropagation();
});

更改JS只会感激

因为我不想更改HTML代码（在这种情况下它只是示例，但在我的整个项目中很难改变所以我尝试通过使用崩溃事件来选择该范围bootstrap）

Because i don't want to change HTML code (in this case it's only example but in my whole project it's hard to change so i try to select that span by using collapse event of bootstrap)

谢谢

推荐答案

你需要引用当前元素如下所示折叠时使用此：

You need to refer with current element using this when you are collapsing as below:

$('.collapse').on('show.bs.collapse',function(){
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
      //get the previous span of this element and toggle its above classes
}).on('hide.bs.collapse',function(){
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
      //get the previous span of this element and toggle its above classes
});

DEMO

DEMO

关于您的可选案例，我希望您期望以下功能：

Regarding your optional case, I hope you are expecting the below functionality:

$('.collapse').on('show.bs.collapse',function(){
      $('.collapse').not($(this)).removeClass('in');
      //hide all divs except this which are open by removing its `in` class
      $('.collapse').not($(this)).prev('span').addClass('glyphicon-plus').removeClass(' glyphicon-minus');
      //change all classes except the previous spans of this element back to normal
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
}).on('hide.bs.collapse',function(){
      $(this).prev('span').toggleClass('glyphicon-plus glyphicon-minus');
});

更新的演示

UPDATED DEMO

这篇关于事件差异引导崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！