पतन घटना पर ट्विटर बूटस्ट्रैप 2

Question

क्या पतन मेनू प्रकट होने पर पकड़ने का कोई तरीका है (या जब उपयोगकर्ता द्वारा संकुचित बटन क्लिक किया जाता है)?

मैं मानक बूटस्ट्रैप ट्विटर ढांचे और कक्षाओं का उपयोग कर रहा हूं।

Answer 1

ट्विटर बूटस्ट्रैप 2

ऐसा लगता है कि प्लगइन सक्रिय पतन समूह के लिए वर्ग "में" जोड़ रहा है। तो शायद आप कुछ ऐसा कर सकते हैं।

if($('#collapseOne').hasClass('in')){ 
..do something 
} 

संपादित करें:

ठीक है, मैं परीक्षण के लिए वैसे भी अभी नहीं है, इसलिए इस तरह के सिर्फ अनुमान लगा लेता है। मुझे यकीन है कि आप आसानी से यह निर्धारित कर सकते हैं कि ऐसा करने से एक पतन लिंक पर क्लिक किया गया था।

$('.accordion-toggle').click(function(){ 
    console.log('clicked'); 
}); 

हालांकि अगर आप जानना चाहते थे कि वास्तव में किस पर क्लिक किया गया था तो आपको शायद उन्हें अनुक्रमित करना होगा।

Answer 2

"दिखाया" ईवेंट हैंडलर का उपयोग करें:

$("#accordion").on("shown",function(event){ 
     collapse_element = event.target; 
    }); 

संदर्भ लें करने के लिए: http://twitter.github.com/bootstrap/javascript.html#collapse अन्य घटनाओं समर्थित

Answer 3

को देखने के लिए आप आइकन आप की जरूरत है की बदलती के साथ एनीमेशन आसान उपयोग करना चाहते हैं इसे शो/छुपाएं पर करें।

इस उदाहरण में, मैं बूटस्ट्रैप 2.3.2 का उपयोग कर रहा, jQuery 1.8.3, और फ़ॉन्ट बहुत बढ़िया 3.2.1

HTML:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a data-item-id="{id}" href="#something" data-parent="#accordion" 
     data-toggle="collapse" class="accordion-toggle"> 
     <i class="icon icon-expand-alt"></i> {title}</a> 
    </div> 
    <div data-item-id="{id}" class="accordion-body collapse" id="something"> 
     <div class="accordion-inner"> 
     {Content} 
     </div> 
    </div> 
    </div> 
... {additional panels} 
</div> 

js:

$('#accordion').on('show hide', function (e) { 
    var oTarget = $(e.target); 
    var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]')); 
    oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200); 
}); 

Answer 4

बूटस्ट्रैप 3.x में, आप जिन चार घटनाओं को खोज रहे हैं वे हैं:

show.bs.collapse 
shown.bs.collapse 
hide.bs.collapse 
hidden.bs.collapse 

वे डेटा-लक्षित डीओएम तत्व पर आग लगते हैं, उदा।

<div role="navigation" class="navbar navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">Title</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li id="item1"><a href="#item1">Menu Item 1</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

आप (jQuery में) सुनने चाहते हैं के माध्यम से: निम्नलिखित मार्क-अप के लिए

$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); }); 
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });