Question

目前我的代码是

$('.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代码看起来像（例如）

<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）时，我会在我使用
时回到正常（不是点击）状态之前点击
```
$('.collapse').click(function(e){
   e.stopPropagation();
});
```

改变JS只会感激不尽

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

由于

Answer 1

在折叠时，您需要使用this引用当前元素，如下所示：

$('.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

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

$('.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

事件差异引导崩溃

1 个答案: