jquery 引导程序折叠面板-切换所有嵌套元素

lqfhib0f 于 2022-12-03 发布在 jQuery

关注(0)|答案(2)|浏览(191)

我在一个页面上有很多嵌套的引导程序可折叠元素。例如http://jsfiddle.net/JPgLT/7/
如何设置链接以仅在父元素内切换all元素？

<div class="panel panel-default">
    <div class="panel-heading">
            <h2 class="panel-title">
                <a href="#collapse-764" data-parent="#collapsible-" class="accordion-toggle" data-toggle="collapse">Headline 1</a>
            </h2>
    </div>
    <div id="collapse-764" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="panel panel-default">
                <div class="panel-heading">
                        <h2 class="csc-firstHeader panel-title">
                            <a href="#collapse-765" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.1</a>
                        </h2>
                </div>
                <div id="collapse-765" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>Text 1.1</p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        <a href="#collapse-766" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.2</a>
                    </h2>
                </div>
                <div id="collapse-766" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>Text 1.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

jquery

来源：https://stackoverflow.com/questions/22055572/bootstrap-accordion-toggle-all-nested-elements

2条答案

按热度按时间

hmmo2u0o1#

您可以向按钮添加一个特殊的类closeall，然后使用jQuery切换折叠状态。

$('.closeall').click(function(){
    $(this).parents('.panel-heading') // find the parent heading element
    .next('.panel-collapse')          // find the next collapse element
    .collapse('show')                 // make sure it's open
    .find('.panel-collapse')          // find inner collapse elements
    .collapse('toggle');              // toggle their state
});

引导程序3演示：https://codeply.com/p/g0vquJl0Xn

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

bgtovc5b2#

我想我对您的问题的理解有点不同，我知道您已经期待答案，但我想我还是要回答，因为我对jQuery还很陌生，希望得到反馈

$el = $(".accordian-toggle").first();  //Use whatever selector you have to to select the parent element
$el.click(); //expand/toggle that element

//then use that elements href attribute as the selector to find all toggleable 'child' elements 
$($el.attr('href')).find(".accordion-toggle").each(function(){
    $(this).click();
});

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

我来回答

jquery 引导程序折叠面板-切换所有嵌套元素

2条答案

相关问题

热门标签

最新问答