एक घटना के माध्यम से बूटस्ट्रैप को ट्रिगर करें। कोलेप्स ('टॉगल')

Question

मेरे पास एक ऐसा फॉर्म है जो कई बूट-आउट-बूट-बूट बूटस्ट्रैप संकुचित पैन को फैलाता है। वे माउस क्लिक पर सही ढंग से टॉगल करते हैं - अब मैं वर्तमान में खुले फलक के अंतिम इनपुट से टैबबिंग करते समय किसी भी ईवेंट की आग के माध्यम से एक बंद फलक खोलने का एक तरीका लागू करना चाहता हूं।

आईओओ, जैसा कि मैं खुले फलक के इनपुट फ़ील्ड के माध्यम से कदम करता हूं, मैं एक इनपुट से अगले इनपुट तक टैब कर सकता हूं - जब मैं अंतिम इनपुट से टैब करता हूं तो फोकस अगले फलक के बाद वाले हेडर क्षेत्र में जाता है। मैं उस हेडर क्षेत्र में .collapse('toggle') को आग लगाने के लिए टैबबिंग का कार्य करना चाहता हूं;

मैं पर कुछ रूपों की कोशिश की है:

$('#collapseAcct').focus(function() { 
     $('#collapseAcct').collapse('toggle'); 
    }); 

और भी :parent साथ परिवार पेड़ पर चढ़ की कोशिश की है, लेकिन कुंजी नहीं मिली है। मेरे पैन का ढांचा: मैं 3 पैन का उपयोग कर रहा हूं जहां अद्वितीय पहचानकर्ता div संरचना में एक घोंसला वाली एक परत है - बीएस के दस्तावेज़ीकरण के समान ही। E.G. 1 फलक के struc:

<div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a>    
     </div> 
     <div id="collapseAcct" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      <div>content</div>[and everything wraps out accordingly] 

Answer 1

यह मिलना चाहिए आप आरंभ: http://jsfiddle.net/Xbg4n/45/

उदाहरण .collapse का उपयोग नहीं करता, ख बस .slideUp और .slideDown ... को पतन के साथ स्वैप करने के लिए पर्याप्त आसान होना चाहिए लेकिन उदाहरण उद्देश्यों के लिए काम करता है। आप वास्तव में इस से बाहर निकलने वाले लक्ष्यीकरण हैं, जो मुझे लगता है कि आप मुख्य रूप से पूछ रहे थे। मैंने पहले कंटेनर पर वापस चक्र के लिए थोड़ा सा जोड़ा, लेकिन वहां रुक गया। आपको फोकस पर बेहतर नियंत्रण जोड़ना चाहिए (एंकर टैग पर ध्यान से बचें और पहले कंटेनर पर साइकिल चलाने पर बल केंद्रित करें)।

आप पूर्ण HTML नमूना कोड प्रदान नहीं किया है, इसलिए मैं रिक्त स्थान को भरा:

<form id="myform"> 
<div class="accordion-group"> 
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a> 
    </div> 
    <div id="collapseAcct1" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      <div> 
       <input type="text" name="input1" /> 
       <input type="text" name="input11" /> 
       <input type="text" name="input12" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Settings</a> 
    </div> 
    <div id="collapseAcct3" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      <div> 
       <input type="text" name="input3" /> 
       <input type="text" name="input31" /> 
       <input type="text" name="input32" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Prefs</a> 
    </div> 
    <div id="collapseAcct2" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      <div> 
       <input type="text" name="input2" /> 
       <input type="text" name="input21" /> 
       <input type="text" name="input22" /> 
      </div> 
     </div> 
    </div> 
</div> 

जे एस:

$('.accordion-group').each(function(){ 
var topcontainer = $(this); 
topcontainer.find('input:last').each(function(){ 
    $(this).blur(function(){ 
     //swap slideup and slidedown for 'collapse' as appropriate 
     var nextag = topcontainer.next('.accordion-group'); 
     var lastag = $('.accordion-group').last(); 
     if(topcontainer.is(lastag)){ 
      var nextag = $('.accordion-group').first(); 
     } 
     var showag = nextag.find('.collapse'); 
     var hideag = topcontainer.find('.collapse'); 
     showag.slideDown(); 
     hideag.slideUp(); 
    }); 
}); 

});

सीएसएस:

#collapseAcct2 { 
    display:none; 
} 
#collapseAcct3 { 
    display:none; 
} 

Answer 2

यह दूसरी तरह के आसपास कर रही है, और खोलने अगले अकॉर्डियन जब वर्तमान अकॉर्डियन में पिछले इनपुट blurs के बारे में क्या:

$('.accordion-inner input:last').on('blur', function() { 
    $('#collapseAcct').collapse('show'); 
}); 

और आप निश्चित रूप से किया था सब देना तत्वों अद्वितीय ID के, और सभी collapseAcct

Answer 3

मैं एक स्थिति है जहाँ बूटस्ट्रैप पैनलों एक रूप ध्यान या माउसओवर पर इतना खुला तरह व्यवहार करते हैं बनाने के लिए आवश्यक था।

मैंने अभी क्लिक ईवेंट ट्रिगर किया है।

कोड:

$('.panel-title a').bind('mouseover focus',function(){ 
$(this).trigger('click'); 
});