我有第8列,其中包含复选框的面板部分列表,然后在右侧是该特定面板部分的信息的第4列列表。
我决定通过使用data-parent
一次打开一个面板。
在同一面板触发元素中,我定义了两个数据目标。前<a data-toggle="collapse" data-parent="#accordion" data-target="#design,#collapseDesign">
问题是第4列内data-parent
之外的数据目标未正确关闭。显然为什么不是这样,但是我如何编写它以便引导程序知道要关闭目标?
http://jsfiddle.net/n353v9at/
<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>
是否有一种纯引导程序来处理此问题,还是需要创建一个自定义方法?
最佳答案
而不是使用ID来标识元素,您应该尝试使用同一类:
http://jsfiddle.net/n353v9at/1/
HTML代码(我将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>
但是,我不知道为什么在第二种情况下引导程序可以正常工作。