Bootstrap-Akkordeon toggle ausgelöst onclick Verhalten sich komisch

Ich will trigger toggle-Funktion die Bootstrap-Akkordeon auf klicken Sie auf " imagemap-Bereich. Problem ist, dass es verhält sich seltsam. Wenn ich auf irgendeinem Gebiet erstmals alle Akkordeon-Elemente angezeigt werden, dann auf das zweite klicken, werden alle zusammengebrochen, und schließlich auf dem Dritten Klick und später funktioniert es wie erwartet. Erstellt habe ich das Beispiel auf jsfiddle (http://jsfiddle.net/adnank/SHdJm/4/).

Ich habe versucht, verschiedene setups, aber diese scheint zu funktionieren, am ehesten als das, was erwartet wird.

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

Ich habe umgeschrieben, die onclick-Teile.. Es ist kürzer, aber das seltsame Verhalten nicht Weg :s meine atempt

InformationsquelleAutor Adnan Kurtovic | 2013-07-11

7
1. Wenn Sie die Arbeit mit bootstrap collapse-plugin und die Tasten sind groupped brauchen Sie nicht zu rufen collapse-Methode für jedes Element, nur für eine. So onclick handler so Aussehen: onclick="jQuery('#collapseOne').collapse('toggle');". Aber in diesem Fall müssen Sie auch initialisieren Umschalten übergeordnete option für jeden Bereich.
2. Können Sie mehr als einen toggle-button für ein content block. So onclick - handler ist nicht notwendig und kann relaced mit data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"
Beispiel: http://jsfiddle.net/SHdJm/8/
- Vielen Dank, das ist genau das, was ich suchte. Ich habe versucht, auf Daten steuert, aber offensichtlich habe ich es falsch, so eine weitere option war der Einsatz von JS 🙂
- Ich weiß, man soll nicht nur sagen, 'danke', aber Sie hat mir geholfen, einen bug zu beheben, dass ich schon über Stunden. Es ist immer das dumme kleine Dinge. Ich war 'anbringen' meine toggle-code auf jeder Akkordeon, wie Sie erstellt wurden dynamisch, das alle anderen Akkordeon nicht funktioniert (und nicht funktionieren, ich meine die icons nicht ändern würde). So, vielen Dank!
- Segne Euch 🙂 Es war genau das, was ich suchte zu
InformationsquelleAutor sody

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.