Bootstrap accordéon bascule déclenchée à partir de onclick se comportent bizarre

Je veux déclencher la fonction de bascule de Bootstrap de l'accordéon sur cliquez sur l'image de la carte de la zone. L'ennui, c'est qu'il se comporte de façon étrange. Quand je clique sur une zone première fois, l'ensemble de l'accordéon éléments sont présentés, puis sur le deuxième clic, tout devient effondré, et enfin sur la troisième cliquez sur et plus tard, il fonctionne comme prévu. J'ai créé exemple sur jsfiddle (http://jsfiddle.net/adnank/SHdJm/4/).

J'ai essayé différentes configurations, mais celui-ci semble être de travailler plus étroitement que ce qui est attendu.

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

J'ai réécrit le onclick pièces.. C'est plus court, mais le comportement étrange n'est-ce pas disparu :s mon atempt

OriginalL'auteur Adnan Kurtovic | 2013-07-11

7
1. Lorsque vous travaillez avec des fichiers d'amorce de l'effondrement du plugin et les boutons à bascule sont groupped vous n'avez pas besoin d'appeler l'effondrement de la méthode pour chaque élément, juste pour un. Donc onclick gestionnaire peut ressembler à: onclick="jQuery('#collapseOne').collapse('toggle');". Mais dans ce cas, vous avez également besoin d'initialiser bascule parent option pour chaque zone.
2. Vous pouvez joindre plus d'un bouton à bascule pour un bloc de contenu. Donc onclick gestionnaire n'est pas nécessaire et peut être relaced avec data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"
De travail exemple: http://jsfiddle.net/SHdJm/8/

Merci, c'est exactement ce que je cherchais. J'ai essayé d'utiliser les contrôles de données, mais évidemment, je n'ai pas correctement, et donc une autre option est d'utiliser JS 🙂
Je sais que vous n'êtes pas censé juste dire "merci", mais vous m'avez aidé à corriger un bug que j'avais travaillé pendant des heures. C'est toujours l'idiot de petites choses. J'ai été "liées" ma basculer le code à chaque accordéon comme ils ont été créés de manière dynamique, qui fait tous les autres accordéon fonctionne pas (et ne pas travailler, je veux dire les icônes ne changent pas). Donc, merci à vous!
Vous bénis 🙂 C'est exactement ce que je cherchais trop

OriginalL'auteur sody

Vous devez vous connecter pour publier un commentaire.