如何在面板标题点击事件上展开/折叠bootstrap accordion？
如何在面板标题点击事件上展开/折叠bootstrap accordion？
提问于 2015-11-25 16:28:35
我尝试在单击事件时展开/折叠“面板标题”上的“面板主体”，而不是在单击时展开/折叠“<a>”(默认)，但它不起作用。
下面是我的html标记：
<div class="panel-group" id="orderAccordion" role="tablist" aria-multiselectable="true">
<!-- PORTAL DESIGN -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingPortalDesign">
<h4 class="panel-title before-icon">
<a role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign">
Portal Design
</a>
</h4>
</div>
<div id="collapsePortalDesign" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingPortalDesign">
<div class="panel-body website-design">
<ul class="list-unstyled">
<li><span class="radio no-margin"><label><input type="radio" name="web_design" data-price="15000" value="Website Design">Website design required</label></span></li>
<li><span class="radio no-margin"><label><input type="radio" name="web_design" data-price="7000" value="Website Re-Design">Re-Design existing website</label></span></li>
<li><span class="radio no-margin"><label><input type="radio" name="web_design" data-price="0" value="Not Required">Website design not required</label></span></li>
</ul>
</div>
</div>
</div>
<!-- PORTAL DESIGN END -->
<!-- MOBILE RECHARGE API START -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title before-icon">
<a href="#collapseTwo" id="mobile-recharge-api" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseTwo">
Recharge API's
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body mobile-api-plan">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-recharge">
<div class="panel-heading">
<div class="panel-title"><h4>Basic Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-mobile" data-price="18000" value="Basic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-recharge">
<div class="panel-heading">
<div class="panel-title"><h4 class="text-center">Business Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-mobile" data-price="25000" value="Business">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-recharge">
<div class="panel-heading">
<div class="panel-title"><h4>Enterprise Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-mobile" data-price="150000" value="Enterprise">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MOBILE RECHARGE API END -->
<!-- UTILITY BILL API START -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingUtilityBill">
<h4 class="panel-title before-icon">
<a href="#collapseUtilityBill" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseUtilityBill">
Utility Bill Payment API's
</a>
</div>
<div id="collapseUtilityBill" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingUtilityBill">
<div class="panel-body utility-api-plan">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-utility">
<div class="panel-heading">
<div class="panel-title"><h4>Basic Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-utlitybill" data-price="18000" value="Basic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-utility">
<div class="panel-heading">
<div class="panel-title"><h4 class="text-center">Business Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-utlitybill" data-price="25000" value="Business">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-utility">
<div class="panel-heading">
<div class="panel-title"><h4>Enterprise Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-utlitybill" data-price="150000" value="Enterprise">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- UTILITY BILL API END -->
<!-- TRAVEL API START -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingTravel">
<h4 class="panel-title before-icon">
<a href="#collapseTravel" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseTravel">
Travel API's
</a>
</h4>
</div>
<div id="collapseTravel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTravel">
<div class="panel-body travel-api-plan">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-travel">
<div class="panel-heading">
<div class="panel-title"><h4>Basic Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-travel" data-price="18000" value="Basic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-travel">
<div class="panel-heading">
<div class="panel-title"><h4 class="text-center">Business Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-travel" data-price="25000" value="Business">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-travel">
<div class="panel-heading">
<div class="panel-title"><h4>Enterprise Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-travel" data-price="150000" value="Enterprise">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TRAVEL API END -->
<!-- DMR API PLANS START -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingDmr">
<h4 class="panel-title before-icon">
<a href="#collapseDmr" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseDmr">
Money Transfer API's
</a>
</h4>
</div>
<div id="collapseDmr" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingDmr">
<div class="panel-body dmr-api-plan">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-dmr">
<div class="panel-heading">
<div class="panel-title"><h4>Basic Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-dmr" data-price="9600" value="Basic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-dmr">
<div class="panel-heading">
<div class="panel-title"><h4 class="text-center">Business Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>Lorem ipsum</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-dmr" data-price="10500" value="Business">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-light panel-center panel-dmr">
<div class="panel-heading">
<div class="panel-title"><h4>Enterprise Plan</h4></div>
</div>
<div class="panel-body">
<div class="s-features">
<ul class="list-unstyled">
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor dedyh</li>
<li>Lorem ipsum</li>
<li>Lorem</li>
<li>-</li>
<li>-</li>
<li><a href="plan-and-pricing.html">Read More</a></li>
</ul>
</div>
</div>
<div class="panel-footer">
<input type="radio" name="api-dmr" data-price="25000" value="Enterprise">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DMR API PLANS END -->
<!-- ADDITIONAL SERVICES CHARGES END -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingoAdditional">
<h4 class="panel-title before-icon">
<a href="#collapseAdditional" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseAdditional">
Additional Services
</a>
</h4>
</div>
<div id="collapseAdditional" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingoAdditional">
<div class="panel-body additional-services">
<ul class="list-unstyled">
<li><span class="checkbox no-margin"><label><input type="checkbox" name="sms_gateway" data-price="5000" value="SMS Gateway"> SMS Gateway</label></li>
<li><span class="checkbox no-margin"><label><input type="checkbox" name="long_code" data-price="1300" value="Long Code"> Long Code</label></li>
</ul>
</div>
</div>
</div>
<!-- ADDITIONAL SERVICES CHARGES END -->
<!-- OTHER CHARGES START -->
<div class="panel panel-transparent">
<div class="panel-heading" role="tab" id="headingoOthers">
<h4 class="panel-title before-icon">
<a href="#collapseOthers" role="button" data-toggle="collapse" data-parent="#orderAccordion" aria-expanded="true" aria-controls="collapseOthers">
Others
</a>
</h4>
</div>
<div id="collapseOthers" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingoOthers">
<div class="panel-body additional-services">
<p>No other service available</p>
</div>
</div>
</div>
<!-- OTHER CHARGES END -->
</div>
</div>现场直播：http://jsfiddle.net/8yaurtxr/
我试着添加data-toggle="collapse“，但它不起作用。
回答 2
Stack Overflow用户
发布于 2015-11-27 20:25:36
您的锚定标记包含所有事件侦听器
<a role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign">Portal Design
</a>从锚定标签中删除事件监听器
role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign"并粘贴到包含面板标题类的div中
像这样
<div class="panel-heading" role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign" role="tab" id="headingPortalDesign">只需对所有其他手风琴执行此操作，它就会像您希望的那样工作
Stack Overflow用户
发布于 2017-03-31 00:05:02
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">
<a>Collapsible Group Item #1</a>
</h4></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33911631
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号