我有一个第8列，其中包含一个复选框的面板部分列表，然后在右边是该特定面板部分的第4列信息列表。
我决定使用data-parent一次打开一个面板，这允许我这样做。
在同一个面板触发元素中，我定义了两个数据目标。前<a data-toggle="collapse" data-parent="#accordion" data-target="#design,#collapseDesign">
问题是第4列中data-parent之外的数据目标未正确关闭。这显然是为什么不是，但我如何编写它以便bootstrap知道关闭目标？
<div class="col-xs-8">
<div class="panel-group" id="accordion">
<div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#design,#collapseDesign">
<div class="panel-heading">
<h4 class="panel-title">Design</h4>
<i class="ti-arrow-circle-down"></i>
</div>
</a>
<div id="collapseDesign" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<input type="checkbox" id="c1" name="Order[psd]" />
<label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">PSD</div>
<div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Do you have a PSD file that you would like to be converted into code?" class="ti-more-alt"></span>
</div>
<div class="psd-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup</div>
</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="c2" name="cc" />
<label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">Custom</div>
<div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Let us handle your design, we will submit mockups, this option will cost more." class="ti-more-alt"></span>
</div>
<div class="custom-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a design concept</div>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#demo,#collapseOne">
<div class="panel-heading">
<h4 class="panel-title">Markup</h4>
<i class="ti-arrow-circle-down"></i>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<input type="checkbox" id="c1" name="cc" />
<label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">PSD</div>
<div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup...</div>
</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="c2" name="cc" />
<label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">Custom</div>
<div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a concept...</div>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="info-preferences">
<div id="design" class="collapse in">
<p>Describe the design process</p>
</div>
<div id="demo" class="collapse">
<p>Describe the markup process</p>
</div>
</div>
</div>
是否有纯粹的引导程序来处理这个问题，还是需要创建自定义方法？
答案 0 :(得分：0)
不应使用id来标识元素，而应尝试使用相同的类来执行此操作： http://jsfiddle.net/n353v9at/1/
HTML CODE（我为data-target="#design,#collapseDesign"更改了data-target=".collapseDesign"，我将此类添加到了您希望关闭的元素中
<div class="col-xs-8">
<div class="panel-group" id="accordion">
<div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target=".collapseDesign">
<div class="panel-heading">
<h4 class="panel-title">Design</h4>
<i class="ti-arrow-circle-down"></i>
</div>
</a>
<div class="panel-collapse collapse in collapseDesign">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<input type="checkbox" id="c1" name="Order[psd]" />
<label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">PSD</div>
<div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Do you have a PSD file that you would like to be converted into code?" class="ti-more-alt"></span>
</div>
<div class="psd-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup</div>
</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="c2" name="cc" />
<label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">Custom</div>
<div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Let us handle your design, we will submit mockups, this option will cost more." class="ti-more-alt"></span>
</div>
<div class="custom-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a design concept</div>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#demo,#collapseOne">
<div class="panel-heading">
<h4 class="panel-title">Markup</h4>
<i class="ti-arrow-circle-down"></i>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<input type="checkbox" id="c1" name="cc" />
<label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">PSD</div>
<div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup...</div>
</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="c2" name="cc" />
<label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
<div style="display: inline-block; color: #000">Custom</div>
<div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a concept...</div>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="info-preferences">
<div class="collapse in collapseDesign">
<p>Describe the design process</p>
</div>
<div id="demo" class="collapse">
<p>Describe the markup process</p>
</div>
</div>
</div>
但是，我不知道为什么在第二种情况下bootstrap工作正常。