twitter-bootstrap 从 onclick 触发的 Bootstrap 手风琴切换行为很奇怪

Bootstrap accordion toggle triggered from onclick behave weird

提问by Adnan Kurtovic

I want to trigger toggle function of Bootstrap accordion on click on image map area. Trouble is that it behaves strangely. When I click on some area first time, all accordion elements are shown, then on second click, all become collapsed, and finally on third click and later it works as expected. I have created example on jsfiddle (http://jsfiddle.net/adnank/SHdJm/4/).

我想在单击图像映射区域时触发 Bootstrap 手风琴的切换功能。问题是它的行为很奇怪。当我第一次单击某个区域时，会显示所有手风琴元素，然后在第二次单击时全部折叠，最后在第三次单击时，它会按预期工作。我在 jsfiddle ( http://jsfiddle.net/adnank/SHdJm/4/)上创建了示例。

I have tried different setups, but this one seems to be working most closely as what is expected.

我尝试了不同的设置，但这个设置似乎最符合预期。

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

采纳答案by sody

1. When you work with bootstrap collapse plugin and toggle buttons are groupped you don't need to call collapse method for each item, just for one. So onclickhandler can look like: onclick="jQuery('#collapseOne').collapse('toggle');". But in this case you also need to initialize toggle parent option for each area.
2. You can attach more than one toggle button for one content block. So onclickhandler is not neccessary and can be relaced with data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

1. 当您使用 bootstrap 折叠插件和切换按钮分组时，您不需要为每个项目调用折叠方法，只需为一个。因此，onclick处理程序可以是这样的：onclick="jQuery('#collapseOne').collapse('toggle');"。但在这种情况下，您还需要为每个区域初始化切换父选项。
2. 您可以为一个内容块附加多个切换按钮。所以onclick处理程序不是必需的，可以与data-toggle="collapse" data-parent="#faq" data-target="#collapseOne"

Working example: http://jsfiddle.net/SHdJm/8/

工作示例：http: //jsfiddle.net/SHdJm/8/