bootstrap 4个嵌套选项卡：'全部显示'按钮以显示子选项卡中的节点

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

显然，实现这一目标的唯一方法是向选项卡的最顶部行添加一个额外的类，然后将该类切换为显示“无”，并且里面的元素都将具有额外的类“活动秀”。

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

如果有人在此期间另一种更优雅的解决方案，将是很好的。