ブートストラップアコーディオントグルがonclickから起動して変わった

Question

イメージマップエリアをクリックすると、ブートストラップアコーディオンのトグル機能が起動します。問題は、それが奇妙に動作することです。最初にいくつかの領域をクリックすると、すべてのアコーディオン要素が表示され、2回目のクリックですべてが折りたたまれ、最後に3回目のクリックで後で期待通りに機能します。私はjsfiddle（http://jsfiddle.net/adnank/SHdJm/4/）の例を作成しました。

私はさまざまな設定を試しましたが、これは予想どおりに最もよく働いているようです。

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

Answer 1

1. ブートストラップ崩壊プラグインと連携し、ボタンを切り替えるときにあなただけの1のために、各項目の崩壊メソッドを呼び出す必要はありませんgrouppedされています。だからonclickハンドラは次のようになります：onclick="jQuery('#collapseOne').collapse('toggle');"。しかし、この場合は、各領域のトグル親オプションを初期化する必要があります。
2. 1つのコンテンツブロックに複数のトグルボタンを付けることができます。だから、onclickハンドラは必要ありませんし、data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

実施例でrelacedすることができます。http://jsfiddle.net/SHdJm/8/