如何在面板标题Click事件上扩展/折叠Bootstrap手风琴？
[英]How to expand/collapse bootstrap accordion on panel-heading click event?
问题描述
I try to Expand/Collapse 'panel-body' on 'panel-heading' on click event instead of <a> on click (default), but it's not working. 
我尝试在单击事件上在“面板标题”上展开/折叠“ panel-body”，而不是在单击时单击“ <a> ”（默认），但是它不起作用。
Here is my html markup: 这是我的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>
Here the live: http://jsfiddle.net/8yaurtxr/ 这里直播： http : //jsfiddle.net/8yaurtxr/
I have try to add data-toggle="collapse" but it's not working. 我尝试添加data-toggle =“ collapse”，但无法正常工作。
2 个解决方案
解决方案1
0 2015-11-27 12:25:36
Your anchor tag has all the event listeners 您的锚标记具有所有事件侦听器
<a role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign">Portal Design
</a>
delete the event listeners from the anchor tag 从定位标记中删除事件监听器
role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign"
and paste it in the div containing panel-heading class 并将其粘贴到包含面板标题类的div中
like this 像这样
<div class="panel-heading" role="button" data-toggle="collapse" data-parent="#orderAccordion" href="#collapsePortalDesign" aria-expanded="true" aria-controls="collapsePortalDesign" role="tab" id="headingPortalDesign">
just do this for all the other accordions and it should work like you want it to 只需对所有其他手风琴进行此操作，它应该可以像您希望的那样工作
解决方案2
0 2017-03-30 16: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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
面板标题主体的折叠/展开 - collapse / expand of panel-heading body
Bootstrap手风琴可从面板标题+状态指示器切换 - Bootstrap accordion toggled from panel-heading + state indicators
html手风琴显示面板标题而不是面板标题 - html accordion shows panel-heading not panel-title
如何在超链接上展开特定的Bootstrap手风琴面板单击另一页？ - How to expand specific bootstrap accordion panel on hyperlink Click on another page?
折叠/展开按钮上的折叠单击 - Collapse/Expand Accordion on Button Click
bootstrap手风琴：如何一键折叠 - bootstrap accordion : how to collapse all at a click
引导程序：使用面板标题折叠面板主体 - Bootstrap: Using panel heading to collapse panel body
Bootstrap通过点击标题使手风琴折叠？ - Bootstrap make accordion collapse by clicking heading?
如何将扩展/折叠图标的切换添加到Bootstrap手风琴？ - How to add toggling of expand/collapse icons to a Bootstrap accordion?
如何在不关闭其他手风琴的情况下逐步折叠/展开带有自举的手风琴？ - How to collapse/expand an accordion with bootstrap progressively without close the others?
相关标签