没有引导面板标记的引导手风琴

Question

是否有任何可行的方法来创建引导手风琴控件而不必使用“面板”标记？我有折叠控件工作，但我希望能够为控件中的每个部分定位父母。

换句话说，我希望“收入”和“保证金”桶相互切换，并且“收入”内部有“当前收入”、“收入基础”和“当前收入与基础”相互切换其他不干扰父层。

http://jsfiddle.net/Lp903gc5/

标记

<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>

Answer 1

3.x 版本的引导程序需要将 panel 类添加到 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>

Answer 2

刚刚收到一位实际 Bootstrap 开发人员的回复，说目前还不可能，但这是 Bootstrap v4.0 的计划功能。

Answer 3

这样就可以了

$("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');
    }
  });
});

重命名为