有没有可行的方法来创建一个bootstrap手风琴控制，而不必使用＆＃39;面板＆＃39;标记？我有崩溃控制工作，但我希望能够为控件中的每个部分指定父母。
换句话说，我希望＆＃34;收入＆＃34;和＆＃34;保证金＆＃34;桶用于互相切换和收入＆＃34;收入＆＃34;有＆＃34;收入当前＆＃34;，＆＃34;收入基础＆＃34;和＆＃34;收入流与基数＆＃34;在不打扰父图层的情况下相互切换。
标记
<div class="group-by">
<div class="jstree-preview group-dropdown">
<ul id="j3_1">
<li>
<span data-toggle="collapse" href="#collapse-j3_2" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Revenue</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_2" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_3">
<span>Revenue Current </span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_3">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_8">
<span>Revenue Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_8">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_13">
<span>Revenue Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_13">
<li>
<span>Matched Base Revenue</span>
</li>
<li>
<span>Matched Current Revenue</span>
</li>
<li>
<span>Matching %</span>
</li>
<li>
<span>New Sales Revenue</span>
</li>
<li>
<span>Non-Repeat Revenue</span>
</li>
<li>
<span>Normalized Base Revenue</span>
</li>
<li>
<span>Revenue Change %</span>
</li>
<li>
<span>Revenue Volume Change $</span>
</li>
<li>
<span>Total Revenue Change $</span>
</li>
</ul>
</li>
</ul>
<span data-toggle="collapse" href="#collapse-j3_23" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Margin</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_23" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_24">
<span>Margin Current</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_24">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_29">
<span>Margin Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_29">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_34">
<span>Margin Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_34">
<li>
<span>Margin % Change (bps)</span>
</li>
<li>
<span>Margin Volume Change $</span>
</li>
<li>
<span>Matched Base Margin</span>
</li>
<li>
<span>Matched Current Margin</span>
</li>
<li>
<span>New Sales Margin</span>
</li>
<li>
<span>Non-Repeat Margin</span>
</li>
<li>
<span>Normalized Base Margin</span>
</li>
<li>
<span>Total Margin % Change</span>
</li>
<li>
<span>Total Margin Change $</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
答案 0 :(得分：4)
3.x版本的bootstrap需要在panel内的toggler + togglee容器中添加data-parent类。
在您的示例中，可以通过将class="panel"添加到<li>元素的第一和第二深度来完成此操作。我在这里使用你的代码做了一个例子：
http://www.bootply.com/15nIagFMbk
在一个更简单的例子中：
<ul id="accordion">
<li class="panel">
<a href="#c1" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 1
</a>
<p id="c1" class="collapse">
Some collapsable text 1
</p>
</li>
<li class="panel">
<a href="#c2" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 2
</a>
<p id="c2" class="collapse">
Some collapsable text 2
</p>
</li>
<li class="panel">
<a href="#c3" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 3
</a>
<p id="c3" class="collapse">
Some collapsable text 3
</p>
</li>
</ul>
答案 1 :(得分：2)
刚从实际的Bootstrap开发人员那里听说，目前这是不可能的，但这是Bootstrap v4.0的计划功能。
答案 2 :(得分：0)
这将完成工作
$("a[data-parent='#j3_1']").on("click", function() {
var current = $(this).attr("href");
current = $(current);
$(".collapse.toplevel").each(function() {
if (!$(this).is(current)) {
$(this).collapse('hide');
}
});
});
重命名为