twitter-bootstrap – Bootstrap手风琴只能自动折叠一个面板
发布时间:2020-12-17 20:40:02 所属栏目:安全 来源:网络整理
导读:在过去的两个小时里,我一直在摸不着头脑.我有一个带两个面板的手风琴.我希望默认情况下扩展第一个面板.单击折叠面板的标题时,我希望该面板展开,另一个面板折叠.它仅适用于第二个面板的某些情况. 这是一个JSFiddle. 这是我的标记: div id="proposalAccordian
在过去的两个小时里,我一直在摸不着头脑.我有一个带两个面板的手风琴.我希望默认情况下扩展第一个面板.单击折叠面板的标题时,我希望该面板展开,另一个面板折叠.它仅适用于第二个面板的某些情况.
这是一个JSFiddle. 这是我的标记: <div id="proposalAccordian" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseContact">Contact</a> </h4> </div> <div id="collapseContact" class="panel-collapse collapse in"> <div class="panel-body"> @Html.Partial("_ContactPanel") </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal">Proposal</a> </h4> </div> <div id="collapseProposal" class="panel-collapse collapse"> <div class="panel-body"> @Html.Partial("_ProposalPanel") </div> </div> </div> </div> 我正在使用Bootstrap v3.1.1和jQuery v1.10.4. 解决方法
你需要添加data-parent =“#proposalAccordian”
<a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseProposal">Proposal</a> 见小提琴:http://jsfiddle.net/nicos/JKqGc/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |