Bootstrap 不带引导面板标记的引导折叠面板

i1icjdpr 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(4)|浏览(173)

有没有任何可行的方法来创建一个引导 accordion 控件，而不必使用'面板'标记？？我有折叠控件的工作，但我希望能够在控制中的每一节的目标家长。
换句话说，我希望“收入”和“利润”桶能够相互切换，并且在“收入”桶中，“当前收入”、“基础收入”和“当前收入与基础收入”能够相互切换，而不会干扰父层。
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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/29654978/bootstrap-accordion-without-bootstrap-panel-markup

4条答案

按热度按时间

rt4zxlrg1#

3.x版本的bootstrap需要一个panel类添加到data-parent内的toggler + togglee的容器中。
在您的示例中，这可以通过将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>

赞(0）回复(0）举报 2022-12-16

eit6fx6z2#

刚刚从一个实际的Bootstrap开发人员那里得到反馈，他说这目前是不可能的，但这是Bootstrap v4.0的一个计划中的特性。

赞(0）回复(0）举报 2022-12-16

lnxxn5zx3#

这就行了

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

重命名为

赞(0）回复(0）举报 2022-12-16

72qzrwbm4#

我知道这是一个老问题，但有同样的问题，并放弃知道试图实现它在一个WordPress网站上。这是最终的代码与折叠工作正常，但不保持只有一个打开的时间，因为它应该。

<div id="faq-accordion" role="tablist" aria-multiselectable="true">
            
    <article id="post-12347" class="entry-post entry-post-fullwidth panel post-12347 faq type-faq status-publish format-standard hentry faq_category-reservas">
        <div class="entry-content">
            <header id="heading-12347" role="button" data-toggle="collapse" data-parent="#faq-accordion" href="#collapse-12347" class="" aria-expanded="true">
                    <h1 class="entry-title">HEADLINE ACC1</h1>        
            </header><!-- .entry-header -->

            <div id="collapse-12347" class="entry-summary collapse in" role="tabpanel" aria-labelledby="heading-12347" aria-expanded="true" style="">
                <p>answer to HEADLINE ACC</p>
                <div class="entry-footer"></div><!-- .entry-footer -->
            </div><!-- .entry-summary -->
        </div><!-- .entry-content -->
    </article><!-- #post-## -->

            
    <article id="post-12365" class="entry-post entry-post-fullwidth panel post-12365 faq type-faq status-publish format-standard hentry faq_category-reservas">
        <div class="entry-content">
            <header id="heading-12365" role="button" data-toggle="collapse" data-parent="#faq-accordion" href="#collapse-12365" class="collapsed" aria-expanded="false">
                    <h1 class="entry-title">HEADLINE ACC2</h1>        
            </header><!-- .entry-header -->

            <div id="collapse-12365" class="entry-summary collapse" role="tabpanel" aria-labelledby="heading-12365" aria-expanded="false" style="height: 0px;">
              answer 2
            </div>
                <div class="entry-footer"></div><!-- .entry-footer -->
            </div><!-- .entry-summary -->
        </div><!-- .entry-content -->

    </article><!-- #post-## -->

</div>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 不带引导面板标记的引导折叠面板

4条答案

相关问题

热门标签

最新问答