javascript - 如何防止嵌套的 Bootstrap 折叠元素在父级上触发 .show()？

Question

这是我的设置的jsfiddle；

http://jsfiddle.net/7LBr5/1/

你会注意到我在父手风琴上有指示箭头和一个在手风琴显示和隐藏时切换它们的功能。问题是内部折叠区域（用于隐藏产品详细信息）触发了切换父级箭头的功能。似乎 .show() 事件必须在父折叠元素上触发，而子元素实际上是折叠元素。

我该如何解决这个问题，以便孩子崩溃不会切换父母身上的箭头？

这是我的功能的代码；

$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");});

Answer 1

只需使用 停止按钮单击上的事件传播到父级event.stopPropagation，以便在执行按钮上的单击事件后不会触发手风琴上的单击事件。

$thisButton.click(function(e) {
      e.stopPropagation();
//.. Code follows

演示

另外顺便说一下，您不需要在选择器上执行 each 来绑定单击事件，而只需为单击事件本身指定选择器

$(".btn-switch").click(function (e) {
    e.stopPropagation();
    var $thisButton = $(this);
    $thisButton.toggleClass("btn-primary btn-danger");
    if ($(this).hasClass('btn-danger')) {
        $thisButton.html('<i class="icon-remove-circle icon-white"></i> Remove');
        $(this).parents('.thumbnail').find('.rental-count').val('1');
        $(this).parents('.thumbnail').find('input').change();
    } else {
        $thisButton.html('<i class="icon-ok-circle icon-white"></i> Add to Quote');
        $(this).parents('.thumbnail').find('input').val('');
        $(this).parents('.thumbnail').find('input').prop('checked', false);
        $(this).parents('.thumbnail').find('input').change();
    }
});

Answer 2

最好的方法是使用

$(".btn-switch").click(function (e) {

//you code 
return false;

});