logo标签列表

Bootstrap 4选项卡转手风琴。怎么做？

tabsaccordionbootstrap-4
22

我在Google上搜索并发现如何使Bootstrap 3的选项卡在响应式中转换为手风琴，这里是Bootstrap 3 tab to accordion，但我正在使用Bootstrap 4，不知道如何将其转换为Bootstrap 4的选项卡到手风琴。请帮忙。

谢谢！

放置代码 - 您的链接被 SO 阻止。 - furas
4个回答
38
正如评论中所指出的，原始答案是针对Bootsrap 4 Beta 2编写的。发布的Bootstrap 4版本需要在标记/ CSS中进行两个更改。因此需要更新。
在Bootstrap 4中，您可以使用以下标记实现该功能。
（由于内置片段查看器有时会混淆CSS @media查询，所以我也创建了一个Codepen。）
与BS 4 Beta 2相比，有以下两个必需的更改：
第一种，隐藏选项卡的方法已更改：之前通过.fade类管理.tab-pane的透明度，但在发布的版本中，它是具有更高优先级的.fade:not(.show)选择器。因此，为了覆盖opacity，需要将.tab-pane更改为.tab-content > .tab-pane。
第二种，可折叠组的处理也发生了变化。以前需要data-parent属性的切换按钮。但是自发布版本以来，data-parent需要放到可折叠元素上。 Bootstrap 4.1.3的更新代码如下：
<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>


    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
            <div class="card-header" role="tab" id="heading-A">
                <h5 class="mb-0">
                    <!-- Note: `data-parent` removed from here -->
                    <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                        Collapsible Group Item A
                    </a>
                </h5>
            </div>

            <!-- Note: New place of `data-parent` -->
            <div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
                <div class="card-body">
                    [Tab content A]
                </div>
            </div>
        </div>

        <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
            <div class="card-header" role="tab" id="heading-B">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                        Collapsible Group Item B
                    </a>
                </h5>
            </div>
            <div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
                <div class="card-body">
                    [Tab content B]
                </div>
            </div>
        </div>

        <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
            <div class="card-header" role="tab" id="heading-C">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
                        Collapsible Group Item C
                    </a>
                </h5>
            </div>
            <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
                <div class="card-body">
                    [Tab content C]
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.nav-tabs {
    display:none;
}

@media(min-width:768px) {
    .nav-tabs {
        display: flex;
    }

    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}

@media(max-width:767px){
    /* 
     * Changed selector to `.tab-content > .tab-pane` in order to override `.fade:not(.show)`
     * In BS4 Beta `.tab-pane`s were rendered hidden by just `.fade`
     */
    .tab-content > .tab-pane {
        display: block;
        opacity: 1;
    }
}

Bootstrap 4 Beta 2的原始答案：:
Codepen

.nav-tabs {
    display:none;
}

@media(min-width:768px) {
    .nav-tabs {
        display: flex;
    }

    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}

@media(max-width:767px){
    .tab-pane {
        display: block !important;
        opacity: 1;
    }
}
<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>


    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
            <div class="card-header" role="tab" id="heading-A">
                <h5 class="mb-0">
                    <a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true"
                        aria-controls="collapse-A">
                        Collapsible Group Item A
                    </a>
                </h5>
            </div>
            <div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
                <div class="card-body">
                    [Tab content A]
                </div>
            </div>
        </div>

        <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
            <div class="card-header" role="tab" id="heading-B">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false"
                        aria-controls="collapse-B">
                        Collapsible Group Item B
                    </a>
                </h5>
            </div>
            <div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
                <div class="card-body">
                    [Tab content B]
                </div>
            </div>
        </div>

        <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
            <div class="card-header" role="tab" id="heading-C">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false"
                        aria-controls="collapse-C">
                        Collapsible Group Item C
                    </a>
                </h5>
            </div>
            <div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
                <div class="card-body">
                    [Tab content C]
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

1
现在应将data-parent放置在折叠容器上。 - Tim Vermaelen
@MrHeelis，请先检查您的Bootstrap版本（js和css），因为它似乎仍然是beta 4.0.0。 - Tim Vermaelen
对于4.1.3及以上版本，@TimVermaelen的解决方案是正确的。 - Mr Heelis
1
@TimVermaelen 感谢留言！虽然在 data-parent 中的更改确实很重要，但首先导致 OP 过时的是 CSS 中的更改。 - dferenc
在这里找到了最佳解决方案：https://codepen.io/mikeshema/pen/jxQEKw - christian nyembo
显示剩余3条评论
3

当前的Bootstrap 4版本建议将data-parent属性放在折叠容器上。

要将手风琴式的分组管理添加到可折叠区域，请添加数据属性data-parent="#selector"。

<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
        </li>
    </ul>

    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
        <div class="card-header" role="tab" id="heading-A">
            <h5 class="mb-0"><a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">Collapsible Group Item A</a></h5>
        </div>
        <div id="collapse-A" class="collapse show" role="tabpanel" data-parent="#content" aria-labelledby="heading-A">
           <div class="card-body">[Tab content A]</div>
        </div>
    </div>

    <div id="pane-B" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-B">
        <div class="card-header" role="tab" id="heading-B">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">Collapsible Group Item B</a></h5>
        </div>
        <div id="collapse-B" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-B">
            <div class="card-body">[Tab content B]</div>
        </div>
    </div>

    <div id="pane-C" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-C">
        <div class="card-header" role="tab" id="heading-C">
            <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">           Collapsible Group Item C</a></h5>
        </div>
        <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
            <div class="card-body">[Tab content C]</div>
        </div>
    </div>
</div>

https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

DEMO

提醒一下 Tim，你的工作做得很好，但还有两个小问题。1）如果你在大尺寸下选择选项卡 C（[Tab content C]）或选项卡 B（[Tab content B]），然后调整大小缩小时，手风琴标题 A（和/或标题 C）会消失；此外，在任何模式下选择“标签”或“手风琴”时，所选择的内容都不会保留在调整大小后显示的手风琴/标签中。 - Mr Heelis
1
谢谢你。我明天会将它们与我的上一次集成进行比较。只使用数据属性应该可以解决这个问题。 - Tim Vermaelen
1
今天遇到了与CSS相关的问题。请注意更改后的选择器.tab-content .tab-pane。 - Tim Vermaelen
2

希望回答对于使用Bootstrap 5的用户还不算太晚

我正在使用Bootstrap 5，这是我的解决方案，无需编写额外的JS代码

<!-- HTML part -->
<!-- nav/tab links -->
<ul class="nav nav-pills nav-fill" id="tab" role="tablist">
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link active" href="#pane-A" id="tab-A" data-bs-toggle="tab" role="tab">Tab A</a>
  </li>
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link" href="#pane-B" id="tab-B" data-bs-toggle="tab" role="tab">Tab B</a>
  </li>
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link" href="#pane-C" id="tab-C" data-bs-toggle="tab" role="tab">Tab C</a>
  </li>
</ul>
<!-- nav/tab links ends -->

<!-- nav/tab -->
<div id="content" class="tab-content" role="tablist">
  <div id="pane-A" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
    <div class="border rounded p-2" role="tab" id="heading-A">
      <h5 class="mb-0">
        <a data-bs-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
          Collapsible Group Item A
        </a>
      </h5>
    </div>
    <div id="collapse-A" class="collapse show" data-bs-parent="#content" role="tabpanel"
      aria-labelledby="heading-A">
      <div class="card-body">
        [Tab content A]
      </div>
    </div>
  </div>

  <div id="pane-B" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
    <div class="border rounded p-2" role="tab" id="heading-B">
      <h5 class="mb-0">
        <a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false"
          aria-controls="collapse-B">
          Collapsible Group Item B
        </a>
      </h5>
    </div>
    <div id="collapse-B" class="collapse" data-bs-parent="#content" role="tabpanel"
      aria-labelledby="heading-B">
      <div class="card-body">
        [Tab content B]
      </div>
    </div>
  </div>

  <div id="pane-C" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
    <div class="border rounded p-2" role="tab" id="heading-C">
      <h5 class="mb-0">
        <a class="collapsed" data-bs-toggle="collapse" href="#collapse-C" aria-expanded="false"
          aria-controls="collapse-C">
          Collapsible Group Item C
        </a>
      </h5>
    </div>
    <div id="collapse-C" class="collapse" role="tabpanel" data-bs-parent="#content"
      aria-labelledby="heading-C">
      <div class="card-body">
        [Tab content C]
      </div>
    </div>
  </div>
</div>
<!-- nav/tab ends -->

这是我的样式文件内容

.nav-pills {
    display:none;
}

@media(min-width:768px) {
    .nav-pills {
        display: flex;
    }
    .tab-pane .border {
        display:none;
    }  
    .tab-pane .collapse{
        display:block;
    }
}

@media(max-width:767px){
    .tab-content > .tab-pane {
        display: block !important;
        opacity: 1;
    }
}

如果您要使其适用于平板电脑视图，您可以更改参数

2
我使用jQuery将这个Bootstrap 4选项卡转换为折叠面板...希望它能正常工作 :)
function tabToAccordion(){
    var navTab = $(".nav-tabs"),
        tabContent = $(".tab-content");
        // hiding the navtabs
    navTab.hide();
    // appending each link to respective tab-pane
        navTab.find("li").each(function(){
            var destination = $($(this).find(".nav-link").attr("href"));
            var anchor = $(this).find(".nav-link");
            // removing unused attributes and adding tabContent-toggler class
            anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination);
        });
    var tabToggler = $('.tabContent-toggler'),
    tabPane = tabContent.find(".tab-pane"),
    // get all classes in tab pane for further usage and replace tab-pane with empty data
    nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class");
    tabPaneClass = tabPane.attr('class');
    tabPaneClass = tabPaneClass.replace(nonActiveTabPane,"");
    tabToggler.click(function(e){
        // get the destination of clicked element
        var destination = $($(this).attr("href"));
        // if not this element then remove active class
        $(this).parent().find(tabToggler).not($(this)).removeClass("active");
        //if not clicked destination then remove all other class except tab-pane
        $(this).parent().find('.tab-pane').removeClass(tabPaneClass);
        // now toggle active class
        $(this).toggleClass("active");
        // also toggle all other class in tab-pane
        destination.toggleClass(tabPaneClass);
        // if this element dont have active class then remove all other class from tab-pane
        if(!$(this).hasClass("active")){
            destination.removeClass(tabPaneClass);
        }
        // first element of nested tab-pane should be active
        if(destination.has(tabToggler)){
            var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"),
            tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href"));
            tabTogglerFirstChild.addClass("active");
            tabTogglerFirstDestination.addClass(tabPaneClass);
        }
        // preventing default behaviour of element
        e.preventDefault();
    });
}
// check if device is mobile and if so only run the function
if(/Mobi/.test(navigator.userAgent)){
    tabToAccordion();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接