Javascript 无引导面板标记的引导手风琴

Javascript 无引导面板标记的引导手风琴,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,是否有任何可行的方法来创建引导手风琴控件而不必使用“面板”标记??我有崩溃控制工作,但我想能够为控制中的每个部分的目标家长 换句话说,我希望“收入”和“利润”桶能够相互切换,“收入”的内部有“收入当前”、“收入基础”和“收入当前与基础”相互切换,而不会干扰父层 标记 <div class="group-by"> <div class="jstree-preview group-dropdown"> <ul id="j3_1">

是否有任何可行的方法来创建引导手风琴控件而不必使用“面板”标记??我有崩溃控制工作,但我想能够为控制中的每个部分的目标家长

换句话说,我希望“收入”和“利润”桶能够相互切换,“收入”的内部有“收入当前”、“收入基础”和“收入当前与基础”相互切换,而不会干扰父层

标记

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

  • 收入
    • 收入流
      • 扩展区价格
      • 净额
      • 收入
      • DN的收入份额
    • 收入基础
      • 扩展区价格
      • 净额
      • 收入
      • DN的收入份额
    • 当前收入与基数
      • 匹配基本收入
      • 匹配当期收入
      • 匹配%
      • 新销售收入
      • 非重复收入
      • 标准化基本收入
      • 收入变化%
      • 收入量变化$
      • 总收入变动$
    边缘
    • 边际电流
      • 范围内利润率指数
      • 边缘
      • 利润率%
      • 单位利润
    • 保证金基数
      • 范围内利润率指数
      • 边缘
      • 利润率%
      • 单位利润
    • $("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');
          }
        });
      });
      
      <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>