jquery – 从onclick触发的Bootstrap手风琴切换表现得很奇怪

发布时间:2019-07-17 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 从onclick触发的Bootstrap手风琴切换表现得很奇怪脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在点击图像地图区域时触发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>

解决方法

>当您使用bootstrap折叠插件和切换按钮进行分组时,您不需要为每个项目调用折叠方法,只需一个.所以onclick处理程序看起来像:onclick =“jQuery(‘#collapseOne’).collapse(‘toggle’);”.但在这种情况下,您还需要为每个区域初始化切换父选项.
>您可以为一个内容块附加多个切换按钮.所以onclick处理程序不是必需的,可以与data-toggle =“collapse”data-parent =“#faq”data-target =“#collapseOne”相关联

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

总结

以上是脚本之家为你收集整理的jquery – 从onclick触发的Bootstrap手风琴切换表现得很奇怪全部内容,希望文章能够帮你解决jquery – 从onclick触发的Bootstrap手风琴切换表现得很奇怪所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: