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

如果有人在此期間另一種更優雅的解決方案，將是很好的。