我想在点击图像地图区域时触发Bootstrap手风琴的切换功能.麻烦的是它表现得很奇怪.当我第一次点击某个区域时,会显示所有的手风琴元素,然后在第二次点击时,所有手风琴元素都会折叠,最后在第三次点击后,它会按预期工作.我在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,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,450,302,423,360,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,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,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,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>
