Bootstrap 4 Tab 到 Accordion。如何？

【问题标题】：Bootstrap 4 Tab to Accordion. How to?Bootstrap 4 Tab 到 Accordion。如何？
【发布时间】：2017-12-15 19:06:21
【问题描述】：

我在 Google 上搜索并找到了如何在此处 Bootstrap 3 tab to accordion 响应式中将 Bootstrap 3 选项卡制作为手风琴，但我使用的是 Bootstrap 4，但我不知道如何将其转换为 Bootstrap 4 选项卡到手风琴。请帮帮我。

谢谢！

【问题讨论】：

  • 放置代码 - 你的链接被 SO 阻止了。

标签： tabs accordion bootstrap-4


【解决方案1】：

如 cmets 所示，原始答案是为 Bootsrap 4 Beta 2 编写的。发布的 Bootstrap 4 版本需要对标记/css 进行两次更改。因此更新。

在 Bootstrap 4 中，您可以使用以下标记实现该功能。
（由于内置的​​ sn-p 查看器有时会在涉及 css @media 查询时混淆，所以我也创建了一个 Codepen。）

与 BS 4 Beta 2 相比，需要进行以下两项更改：

  • 首先，选项卡的隐藏方式发生了变化：之前.tab-panes 不透明度 由.fade 类管理，但在发布的版本中它是.fade:not(.show) 选择器，它具有更高的优先级。因此，要覆盖 不透明度，需要在 css 中将 .tab-pane 更改为 .tab-content > .tab-pane。
  • 其次，可折叠组的处理方式也发生了变化。以前它是需要data-parent 属性的切换按钮。但是，由于发布版本data-parent 需要进入可折叠元素。

Bootstrap 4.1.3的更新代码如下：

HTML

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

【讨论】：

  • data-parent 现在应该在折叠容器上。
  • @TimVermaelen 你是什么意思我可以看出你是对的（即这个标记不再适用于 bootstrap v4.1.3）但我像疯子一样移动了data-parent，它们仍然消失了（当在移动设备中）我错过了什么？
  • @TimVermaelen EG：将其缩小到移动设备以查看错误codepen.io/anon/pen/JwoKOY#anon-login
  • @dferenc codepen.io/dferenc/pen/YYyjYJ 是您原来的 4.0.0 测试版。（仅适用于 4.0.0）我在此处链接的版本 codepen.io/anon/pen/JwoKOY#anon-login 是 4.1.3（并且不工作）跨度>
  • @TimVermaelen 感谢您的来信！虽然data-parent 的更改确实很重要，但首先导致 OP 过时的更多的是 css 的更改。
【解决方案2】：

当前的 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

【讨论】：

  • FYI _ Tim，工作很棒，但有 2 个小错误 1) 如果您选择大的选项卡 C（[选项卡内容 C]）或选项卡 B（[选项卡内容 B]），然后缩小 Accordion Title A（和或标题 C）消失，当您在任一模式下选择“标签”或“手风琴”时，所选内容不会保留在调整大小模式下显示的手风琴/标签中
  • 谢谢你。我明天会将它们与我上次的集成进行比较。应该可以仅使用数据属性来解决这个问题。
  • 或者今天 ^^ 与 CSS 相关的问题。请注意更改后的选择器.tab-content .tab-pane。
【解决方案3】：

我使用 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();
}

【讨论】：

    【解决方案4】：

    希望为Bootstrap 5用户回答还为时不晚

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

    <!-- 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;
    }
}

    如果您希望它与平板电脑视图一起使用，您可以更改参数

    【讨论】：

      猜你喜欢
      • 2020-11-30
      • 1970-01-01
      • 2020-10-17
      • 1970-01-01
      • 1970-01-01
      • 2019-04-27
      • 2018-09-04
      • 2018-02-14
      • 2019-09-24
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode