引导 4 个嵌套选项卡：“显示全部”按钮以在子选项卡中显示节点

Posted 2023-05-08

【中文标题】引导 4 个嵌套选项卡：“显示全部”按钮以在子选项卡中显示节点

【英文标题】：bootstrap 4 nested tabs: 'show all' button to display nodes in sub-tabs

【发布时间】：2017-11-03 05:26:45

【问题描述】：

我有一份白天吃的餐点清单，按餐点分类：早餐、午餐和晚餐，每餐都有各自的课程。选项卡内容显示数量。 jsFiddle 上的链接：https://jsfiddle.net/3ma0yt7k/2/（代码太长，无法粘贴大部分内容）

    <div class="container">

<div class="tabbable boxed parentTabs">
    <ul class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a class="nav-link active" href="#meal1">Breakfast</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#lunch">Lunch</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#dinner">dinner</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#all">See All Meals</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade show in" id="meal1">
            <div class="tabbable">
                <ul class="nav nav-pills active nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" href="#yoghurt">yoghurt</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#cornflakes">corn flakes</a>
                    </li>           
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show fade active in" id="yoghurt">
                            <div class="form-group row">
                              <p>3 cups of yoghurt</p>
                            </div>
                    </div>
                    <div class="tab-pane fade" id="cornflakes">
                      <div class="form-group row">
                             <p>4 bowls of cornflakes</p>
                            </div> 
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in" id="lunch">
            <div class="tabbable">
                <ul class="nav nav-pills nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" href="#fries">Fries</a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#falafel">Falafel</a>
                    </li>
                </ul>
                <div class="tab-content table-top">
                    <!--pane detail-->
                    <div class="tab-pane show fade active in" id="fries">
                              <p>4 plates of fries</p>
                    </div>
                     <div class="tab-pane fade in" id="falafel">
                              <p>4 bowls of falafel</p>
                    </div>
                </div>
            </div>
        </div>

        <!--dinner-->
          <div class="tab-pane fade in" id="dinner">
            <div class="tabbable">
                <ul class="nav nav-pills nav-justified">
                    <li class="nav-item">
                        <a class="nav-link active" href="#pasta">Pasta</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#pizza">Pizza</a>
                    </li>
                </ul>
                <div class="tab-content table-top">
                    <div class="tab-pane show fade active in" id="pasta">
                        <div class="form-group row">
                              <p>3 plates of pasta</p>
                         </div> 
                    </div>
                    <div class="tab-pane fade" id="pizza">
                       <div class="form-group row">
                              <p>3 slices of pizza</p>
                        </div>                         
                    </div> 
                </div>
            </div>
          </div>   
             <div class="tab-pane fade in" id="all">
                 <p>gather them all</p>
             </div>  
       </div>
   </div>
</div>

我想单击“查看所有餐点”并获取包含当天每餐的所有 .tab-pane 元素的列表。基本上，单击“查看全部”应该会显示包含有关酸奶、玉米片、薯条、沙拉三明治、意大利面和比萨饼的文本的窗格（没有“儿童”窗格）。

我只能在它们属于单个类别或父子关系时收集它们（例如早餐，其中每个 .tab-pane 获得一个“活动”类，但对其他类不起作用（除非单击)?

【参考方案1】：

显然，实现这一点的唯一方法是在选项卡的最顶行添加一个额外的类。然后这个类将被切换为显示“none”，并且里面的元素都将有一个额外的“active show”类。

<div class="tab-pane active **toggle-showing-of-this-class** fade show in" id="meal1">

如果有人同时有另一个更优雅的解决方案，那就太好了。