बूटस्ट्रैप पतन घटना में क्लिक किए गए तत्व को कैसे प्राप्त करें?

Question

मैं बूटस्ट्रैप 3.3.4 .:

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

मैं इस जरूरत का उपयोग कर पतन घटना में क्लिक किए गए एंकर तत्व को खोजने के लिए है क्योंकि मैं टूट को रोकने के लिए है, तो क्लिक किए गए तत्व एक निश्चित डेटा विशेषता है चाहें परेशानी हो रही हूँ । एक और विकल्प .on('click', function()) का उपयोग करके हुक करना होगा, हालांकि अन्य घटनाएं होती हैं जो क्लिक करने की आवश्यकता होती है, इसलिए ऐसा लगता है कि यह मेरे लिए नहीं है। निकटतम एंकर के लिए डीओएम में खोजना या ऐसा कुछ भी काम नहीं करेगा क्योंकि एक दूसरे के बगल में कई एंकर हैं।

Answer 1

के बाद से मेरे मामले कई एंकर विशेष रुप से eachother के बगल में (अर्थात नियमित बूटस्ट्रैप संरचना अनदेखी।), मैं गिर div की आईडी का उपयोग करके क्लिक किए गए लंगर के लिए खोज समाप्त हो गया:

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

Answer 2

इस काम करना चाहिए: http://jsfiddle.net/8s0mn0f4/3/

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

Answer 3

यह समाधान सभी पतन एंकरों और href लक्ष्य के लिए खोजों को रोक देता है। यह #id और byclass द्वारा दोनों संदर्भों के लिए काम करेगा।

इस उदाहरण में मैं इसे क्लिक किए गए तत्व में ध्वस्त वर्ग जोड़ने के लिए उपयोग करता हूं।

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

इस

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

Answer 5

जब बूटस्ट्रैप के पतन की आग की कोशिश करो, और एक div तत्व दिखाया गया है यह वर्ग panel-collapse collapse in हो जाता है।

मुझे इसकी आवश्यकता है ताकि मैं नए खुले पैनल में सामग्री को अजाक्स कर सकूं। आप उस तत्व में एक आईडी या डेटा-विशेषता जोड़ सकते हैं जो एंकर की पहचान करने में मदद कर सकता है।

एचटीएमएल

<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> 

जावास्क्रिप्ट

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