如何折叠bootstrap4列表中的所有其他节点? [英] How to collapse all other nodes in a bootstrap4 list?

问题描述

我正在尝试使用Bootstrap 4事件折叠导航中的扩展列表，以便一次仅扩展一个列表.但是，此列表是分层列表，因为列表项可以包含列表.

I'm attempting to use a Bootstrap 4 event to collapse expanded lists in a nav so that only one list is expanded at a time. However, this list is hierarchical in that list items can contain lists.

此代码仅适用于第一级.但是，如果我选择一个子列表，它将折叠展开列表的父列表.

This code only works for the first level. However, if I select a sub list, it collapses the parent of the expanding list.

$('#sidebar ul ul').on('show.bs.collapse', function () {
    let expandedNode = $(this);
    let parents = expandedNode.parentsUntil("#sidebar");
    //let children = expandedNode.children();
    $("#sidebar ul.show").each(function (idx) {
        if ($(this) !== expandedNode && $.inArray($(this), parents) == -1) 
            $(this).collapse('hide');
    });
});

如何修改此事件处理程序，使其离开正在扩展，扩展的子级列表的父级?解释它的另一种方式是，我想像手风琴一样使用嵌套列表.

How can I modify this event handler so that it will leave the parent of a child list that is expanding, expanded? Another way to explain it is that i want to use nested lists like an accordion.

推荐答案

如果我正确理解您所谈论的是在边栏中使用Bootstrap Collapse，并且每个项目都可能包含预期也会崩溃的子项目.

If I understand correctly you are talking about using Bootstrap Collapse in your sidebar and each item may have sub items which are also expected to collapse.

以下是我对您的问题的理解的一个有效示例.我从 Bootstrap 4嵌套手风琴中获取了代码，并在此处进行了复制；解决方案归功于作者 bgraham1125 .

Below is a working example of my understanding of your question. I took the code from Bootstrap 4 nested accordion and reproduced it here; credit for the solution goes to the author bgraham1125.

另一个类似的例子是 Bootstrap 4嵌套的手风琴带有超赞的字体图标

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0 d-inline">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      Collapsible #1
                    </button>
                 </h5>
                 <a href="#" data-target="[data-parent='#child1']" data-toggle="collapse" class="my-2 float-right">toggle all</a>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body" id="child1">
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapseOneA">Child A</a>
                        </div>
                        <div class="card-body collapse" data-parent="#child1" id="collapseOneA">
                            Crunch wolf moon tempor, sunt aliqua put a bird.
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapseOneB">Child B</a>
                        </div>
                        <div class="card-body collapse" data-parent="#child1" id="collapseOneB">
                            Another flipp runch wolf moon tempor, sunt aliqua put a bird.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible #2
        </button>
      </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible #3
        </button>
      </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                    raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</div>

我正在使用列表.我应该切换到卡片吗?

我觉得答案是肯定的，因为您正在尝试实现手风琴效果.

I feel the answer is yes as you are trying to achieve an accordion effect.

来自官方Bootstrap文档手风琴示例:

From the official Bootstrap docs Accordion example:

使用 card 组件，您可以扩展默认的折叠行为来创建手风琴.要正确实现手风琴样式，请确保使用.accordion作为包装器.

Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

这篇关于如何折叠bootstrap4列表中的所有其他节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！