Wie kann ich verhindern, dass ein verschachteltes Bootstrap-Collapse-Element .show () auf dem Elternelement auslöst?

Question

Hier ist ein jsfiddle von meinem Setup;

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

Sie werden feststellen, dass ich Indikatorpfeile auf dem Eltern-Akkordeon habe und eine Funktion, die sie umschaltet, wenn das Akkordeon angezeigt und ausgeblendet wird. Das Problem ist, dass die inneren zusammenklappbaren Bereiche (die verwendet werden, um Produktdetails auszublenden) die Funktion auslösen, die die Pfeile auf dem Elternelement umschaltet. Es scheint, dass das .show() Ereignis auf dem übergeordneten Kollapseelement ausgelöst werden muss, wenn das Kind tatsächlich das ist, das zusammenklappt.

Wie kann ich das beheben, damit das Zusammenklappen des Kindes nicht die Pfeile auf dem Elternelement umschaltet?

Hier ist der Code für meine Funktion;

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

Halten Sie das Ereignis beim Klicken auf die Schaltfläche einfach mit event.stopPropagation davon ab, zum übergeordneten Element zu propagieren, sodass das Klickereignis des Akkordeons nach Ausführung des Klickereignisses auf der Schaltfläche nicht ausgelöst wird.

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

Demo

Übrigens müssen Sie nicht jedes Mal das each auf dem Selektor ausführen, um das Klickereignis zu binden, sondern geben Sie einfach den Selektor für das Klickereignis selbst an.

$(".btn-switch").click(function (e) {
    e.stopPropagation();
    var $thisButton = $(this);
    $thisButton.toggleClass("btn-primary btn-danger");
    if ($(this).hasClass('btn-danger')) {
        $thisButton.html(' Remove');
        $(this).parents('.thumbnail').find('.rental-count').val('1');
        $(this).parents('.thumbnail').find('input').change();
    } else {
        $thisButton.html(' 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

Beste Möglichkeit ist es zu verwenden

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

//dein Code 
return false;

});