Question

我有一份白天吃过饭的清单，按用餐分类：早餐，午餐和晚餐，每个都有各自的课程。选项卡内容显示数量。关于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获得一类'活跃'，但这对其他人不起作用，我只能收集它们（除非点击）？

Answer 1

显然，实现此目的的唯一方法是在选项卡的最顶行添加一个额外的类。然后将这个课程切换为显示＆＃34; none＆＃34;并且里面的元素都将有一个额外的＆＃34;活动节目＆＃34;。

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

如果有人有另一个更优雅的解决方案同时它会很好。

bootstrap 4嵌套选项卡：'show all'按钮显示子选项卡中的节点

1 个答案: