没有Bootstrap面板标记的Bootstrap手风琴

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 版本的 bootstrap 需要一个panel类添加到 .toggle+toggle 的容器中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 的计划功能。