引導3：默認情況下

Question

這裏展開前面板是我的HTML

<div class="panel panel-default" id="chartsPanel"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-charts" id="charts-title"> 
        <h4> 
         Select Charts</h4> 
       </a> 
      </div> 
      <div class="panel-body" id="panel-charts"> 
       <div class="nav" id="chkListCharts" data-spy="affix" data-offset-top="280"> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="distance"> 
          Distance Comparison Chart 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="overspeed"> 
          Overspeed Chart 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="idle"> 
          Idle/Dormant Chart 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="workingnonworking"> 
          Working/Non-Working 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="workinghour"> 
          Working Hours Chart 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="fuel"> 
          Fuel Report 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="temperature"> 
          Temperature Report 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="rfid"> 
          RFID Report 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" value="camera"> 
          Camera Report 
         </label> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a data-toggle="collapse" href="#panel-vehicles" id="vehicle-title"> 
        <h4> 
         Select Vehicles</h4> 
       </a> 
      </div> 
      <div class="panel-body" id="panel-vehicles"> 
       <div class="nav" id="chkListVehicles" data-spy="affix" data-offset-top="280"> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox"> 
          PB 35A 3467 
         </label> 
        </div> 
       </div> 
      </div> 
     </div> 

我想設置「選擇圖表」面板在默認情況下，另一種是開放的坍塌。 我試圖找到互聯網上的方式，以及對引導的網站，但沒有能夠做到這一點..

$(document).ready(function() { 
    $('#chartsPanel').collapse('hide'); 
}); 

任何幫助嗎？

Answer 1

CSS：

#panel-charts 
{ 
    display:none; 
} 

的jQuery：

$(document).ready(function() { 
    $('#charts-title').click(function() { 
     $('#panel-charts').toggle(); 
    });    
}); 

Answer 2

只需用CSS隱藏它，並在某些事件上調用show（），即當您希望它出現時。

這裏有一個基本的例子：

CSS：

#chartsPanel { 
    display: none; 
} 

的jQuery：

$(document).ready(function() { 
    $(".panel-heading").click(function() { 
     $("#chartsPanel").show(); 
    }); 
}); 

jsFiddle DEMO