關閉整個引導選項卡

Question

這是我的問題。我有一個標籤內容div與幾個標籤窗格與每個標籤的內容。我想在一個選項卡窗格的末尾實現一個關閉按鈕（通常對於每個選項卡窗格，因此可以關閉，但現在可以執行）。關閉按鈕應該隱藏窗格的內容，並應該與窗格一起消失。畢竟，它是其中的一部分。問題來了。有兩種方法可以做到這一點，但兩者似乎都不能正常工作。 「切換」隱藏內容，但即使不包含任何信息，窗格的輪廓仍然可見。 「隱藏」功能很棒，但是當選項卡重新選擇時，它永遠不會打開內容。

這裏已經有類似的情況嗎？我正在試着用一個例子來準備一個JSFiddle，但由於某些原因，它根本沒有顯示任何內容......一旦準備就緒，我會發布它。

我希望你可能有一個想法如何使它工作。這裏有很多例子，它們總是可見的，但我的窗口本身應該消失。它不是自舉模式。

謝謝！

編輯：這是我的小提琴：https://jsfiddle.net/m4a3ssfd/6/

<nav class="navbar-inverse" role="navigation"> 
    <div class="container-fluid"> 
     <div class="container" id="tabs"> 
      <button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="glyphicon glyphicon-tasks"></span> 
      </button> 
      <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav" id="tabList"> 
        <li id="lineupTab"><a href="#lineup" data-toggle="tab">LINE-UP</a></li> 
        <li id="statsTab"><a href="#statistics" data-toggle="tab">STATS</a></li> 
        <li id="resultsTab"><a href="#results" data-toggle="tab">RESULTS</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="tab-content"> 
     <div class="tab-pane container fade" id="lineup"> 
      no text yet 
     </div> 

     <div class="tab-pane container fade collapse collapse-group" id="statistics"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="databox"> 
         <div class="content"> 
          <b>some text</b> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="databox"> 
         <div class="content"> 
          <b>some text</b> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <button class="btn btn-secondary btn-sm" data-toggle="collapse" data-target="#statistics" id="closeStats">x</button> 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane container fade" id="results"> 
      no text yet 
     </div> 

    </div> 
</nav> 

的製表窗格這裏沒有出於某種原因出，否則他們做工精細我的機器上。

Answer 1

對不起，我無法爲您提供更好的小提琴，但我使用jQuery解決了它。我發現沒有直接的bootstrap答案，所以jQuery的一個非常短的片段做了訣竅。

$(document).ready(function() { 
    $("#statsTab").on("click", function() { 
    $("#statistics").css("display", "block"); 

    $("#closeStats").on("click", function() { 
     $("#statistics").css("display", "none"); 
     $("#tabList li.active").removeClass("active"); 
    }); 
    }); 
}); 

的想法是基本上通過隱藏活動面板的視圖，然後去激活所述活動鏈路照顧的標籤窗格內的關閉按鈕的，以使得菜單將返回到呈現出它的初始狀態沒有默認選項卡。