如何在面板標題Click事件上擴展/折疊Bootstrap手風琴？
[英]How to expand/collapse bootstrap accordion on panel-heading click event?
問題描述
我嘗試在單擊事件上在“面板標題”上展開/折疊“ panel-body”，而不是在單擊時單擊“ <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 個解決方案
解決方案1
0 2015-11-27 12: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">
只需對所有其他手風琴進行此操作，它應該可以像您希望的那樣工作
解決方案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>
如何在超鏈接上展開特定的Bootstrap手風琴面板單擊另一頁？
[英]How to expand specific bootstrap accordion panel on hyperlink Click on another page?
如何將擴展/折疊圖標的切換添加到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?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.