事件差异引导崩溃

目前我的代码就像

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

现在发生的事情是

• 当我点击调用函数或展开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

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

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

更新的演示