बूटस्ट्रैप अकॉर्डियन टॉगल चालू होने onclick अजीब

मैं छवि नक्शा क्षेत्र पर क्लिक करने पर ही बूटस्ट्रैप अकॉर्डियन की टॉगल समारोह ट्रिगर करते हैं व्यवहार करते हैं से। परेशानी यह है कि यह अजीब तरीके से व्यवहार करता है। जब मैं कुछ क्षेत्र पहली बार पर क्लिक करें, सभी अकॉर्डियन तत्व तृतीय क्लिक पर दिखाए जाते हैं, तो दूसरे क्लिक पर, सभी ढह हो, और अंत में और बाद में यह उम्मीद के रूप में काम करता है। मैंने jsfiddle (http://jsfiddle.net/adnank/SHdJm/4/) पर उदाहरण बनाया है।बूटस्ट्रैप अकॉर्डियन टॉगल चालू होने onclick अजीब

मैं अलग व्यवस्था की कोशिश की है, लेकिन यह एक सबसे निकट क्या आशा की जाती है के रूप में काम कर रहा है।

<div class="accordion" id="faq"> 
<img src="http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg" alt="Leistungssprektrum" id="kreis" usemap="#map1"> 
    <map name="map1"> 
      <area shape="poly" coords="220,240,290,135,365,175,366,238" alt="Risikoanalyse" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Risikoanalyse.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('toggle');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');"> 
      <area shape="poly" coords="266,252,377,252,377,193,420,193,420,288,267,288" alt="Deckungskonzept" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Deckungskonzept.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('toggle');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');"> 
      <area shape="poly" coords="270,340,400,340,450,302,400,423,360,420,356,376,276,378" alt="Ausschreibung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Ausschreibung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('toggle');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="207,395,330,395,345,465,207,465" alt="Vergabe" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Vergabe.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('toggle');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="48,320,222,314,220,350,188,417,188,474,95,434,47,329" alt="Vertragsbetreuung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Vertragsbetreuung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('toggle');jQuery('#collapseSix').collapse('hide');" style="cursor: pointer;"> 
      <area shape="poly" coords="11,313,11,210,66,98,92,115,90,235,189,235,189,289,52,310" alt="Schadensabwicklung" onmouseover="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Schadensabwicklung.jpg'" onmouseout="document.getElementById('kreis').src='http://www.vero.at/themes/vero/images/en/Leistungsspektrum.jpg'" onclick="jQuery('#collapseOne').collapse('hide');jQuery('#collapseTwo').collapse('hide');jQuery('#collapseThree').collapse('hide');jQuery('#collapseFour').collapse('hide');jQuery('#collapseFive').collapse('hide');jQuery('#collapseSix').collapse('toggle');" style="cursor: hand;"> 
    </map>   
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseOne"> 
      1. Risk analyses 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseTwo"> 
      2. Coverage concepts 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseThree"> 
      3. Tender 
     </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseFour"> 
      4. Authorisation 
     </a> 
    </div> 
    <div id="collapseFour" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseFive"> 
      5. Contract handling 
     </a> 
    </div> 
    <div id="collapseFive" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#collapseSix"> 
      6. Claim settlement 
     </a> 
    </div> 
    <div id="collapseSix" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
      Lorem ipsum 
     </div> 
    </div> 
</div>

स्रोत

2013-07-11 Adnan Kurtovic

मैं onclick भागों फिर से लिख दिया .. यह कम है, लेकिन अजीब व्यवहार समाप्त नहीं हुई है: रों [मेरे atempt ] (http://jsfiddle.net/SHdJm/6/) – Brainfeeder

जब आप बूटस्ट्रैप पतन प्लगइन के साथ काम करते हैं और बटन को चालू groupped कर रहे हैं तो आपको केवल एक के लिए, प्रत्येक आइटम के लिए पतन विधि कॉल करने की जरूरत नहीं है। तो onclick हैंडलर इस तरह दिख सकता है: onclick="jQuery('#collapseOne').collapse('toggle');"। लेकिन इस मामले में आपको प्रत्येक क्षेत्र के लिए टॉगल पैरेंट विकल्प प्रारंभ करने की भी आवश्यकता है।
आप एक सामग्री ब्लॉक के लिए एक से अधिक टॉगल बटन संलग्न कर सकते हैं। तो onclick हैंडलर आवश्यक नहीं है और data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

कार्य उदाहरण के साथ relaced जा सकता है: http://jsfiddle.net/SHdJm/8/

स्रोत

2013-07-11 11:30:45 sody

धन्यवाद, यह वही है जो मैं ढूंढ रहा था। मैंने डेटा नियंत्रणों का उपयोग करने की कोशिश की है, लेकिन जाहिर है मैंने इसे अनुचित तरीके से किया है, इसलिए एक और विकल्प जेएस का उपयोग करना था :) –

मुझे पता है कि आपको सिर्फ 'धन्यवाद' कहना नहीं है, लेकिन आपने मुझे एक बग ठीक करने में मदद की जो मैं चाहता था घंटों तक काम कर रहा है। यह हमेशा गूंगा छोटी चीजें है। मैं प्रत्येक टॉगल कोड को प्रत्येक accordion में 'अटैचिंग' कर रहा था क्योंकि उन्हें गतिशील रूप से बनाया गया था, जिसने हर दूसरे accordion को काम नहीं किया (और काम से नहीं, मेरा मतलब है कि आइकन नहीं बदलेगा)। इसलिए आपका धन्यवाद! – David

आपको आशीर्वाद दें :) यह वही था जो मैं भी ढूंढ रहा था –

बूटस्ट्रैप अकॉर्डियन टॉगल चालू होने onclick अजीब

उत्तर

संबंधित मुद्दे