Come ottenere l'elemento selezionato nell'evento di compressione Bootstrap?

Question

Sto avendo difficoltà a trovare l'elemento di ancoraggio cliccato in caso crollo utilizzando Bootstrap 3.3.4 .:

$('.collapse').on('show.bs.collapse', function (e) { 
    // Get clicked element that initiated the collapse... 
}); 

Ho bisogno di questo perché mi piacerebbe per evitare il collasso se l'elemento cliccato ha un certo attributo data . Un'altra opzione sarebbe quella di connettersi usando .on('click', function()), tuttavia ci sono altri eventi che si verificano sul clic che devono essere eseguiti in modo che questo mi sembra un no-go. Cercare nel DOM l'ancoraggio più vicino o qualcosa di simile non funzionerà bene poiché ci sono più ancore l'una accanto all'altra.

Answer 1

Dal momento che il mio caso ha caratterizzato più ancore accanto a vicenda (vale a dire senza tener conto regolare struttura Bootstrap.), Ho finito per cercare l'ancora fatto clic utilizzando l'ID del div collasso:

$('.collapse').on('show.bs.collapse', function (e) { 
    // Get clicked element that initiated the collapse... 
    clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']") 
}); 

Answer 2

questo dovrebbe funzionare: http://jsfiddle.net/8s0mn0f4/3/

console.log($(e.target).siblings('.panel-heading').find('a')) 

Answer 3

Questa soluzione scorre tutte le ancore di collasso e ricerca il target href. Funzionerà sia per i riferimenti di #id che per .class

In questo esempio lo uso per aggiungere la classe compressa all'elemento su cui si fa clic.

$(document).ready(function() { 
     checkCollapsed(); 
    }) 

    function checkCollapsed() { 
     $('.collapse').on('shown.bs.collapse', function (e) { 
      triggerCollapsedClass(); 
     }).on('hidden.bs.collapse', function (e) { 
      triggerCollapsedClass(); 
     }); 
    } 

    function triggerCollapsedClass() { 
     $("[data-toggle=collapse]").each(function (i, item) { 
      var selector = $(item).attr("href"); 
      if ($(selector).hasClass("in")) { 
       $(item).addClass("collapsed"); 
      } else { 
       $(item).removeClass("collapsed"); 
      } 
     }) 
    } 

Answer 4

provare questo

$element.on('shown.bs.collapse', function(e) { 
    var $clickedBtn = $(e.target).data('bs.collapse').$trigger; 
}); 

Answer 5

quando gli incendi collasso di bootstrap, e un elemento div è mostrata di essa la classe diventa panel-collapse collapse in.

Avevo bisogno di questo in modo da poter ajax il contenuto nel pannello appena aperto. Puoi aggiungere un attributo id o data- a quell'elemento che può aiutare a identificare l'ancora.

HTML

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-X" aria-expanded="true" aria-controls="accordion-x" id="accordionanchor-X"> 
Information X 
</a> 
… 
<div id="collapse-x" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="pageheading-X"> 
    <div class="panel-body"> 
    … 
    </div> 
</div> 

Javascript

$('.collapse').on("shown.bs.collapse", function (e) { 
    var clicked = $(".panel-collapse.collapse.in").attr("id"); 
    alert("collapse " + clicked); 
});