我尝试展开/折叠＆＃39; panel-body＆＃39; on＆＃39; panel-heading＆＃39;单击事件而不是<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/
我尝试添加数据toggle =＆＃34; collapse＆＃34;但它没有用。
答案 0 :(得分：0)
您的锚标记包含所有事件侦听器
<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">
对所有其他手风琴都这样做，它应该像你想要的那样工作
答案 1 :(得分：0)
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<h4 class="panel-title">
<a>Collapsible Group Item #1</a>
</h4></div>