Bootstrap可摺疊面板不點擊第一次點擊

Question

我有一個可摺疊面板，我想加載關閉，但是當我這樣做時，它不會打開第一次點擊，它需要兩個才能打開它。

我用來打開和關閉面板的JavaScript是：

$(document).on('click', '.panel-heading span.clickable', function (e) { 
    var $this = $(this); 
    if (!$this.hasClass('panel-collapsed')) { 
     $this.parents('.panel').find('.panel-body').slideUp(); 
     $this.addClass('panel-collapsed'); 
     $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
    } else { 
     $this.parents('.panel').find('.panel-body').slideDown(); 
     $this.removeClass('panel-collapsed'); 
     $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
    } 
}) 

而且我也初始化面板在文檔就緒功能（我雖然會解決這個問題，但還沒有） ：

$("#VisitFilterPanel").collapse({ toggle: false }); 

和HTML：

<div id="VisitFilterPanel" class="panel panel-info"> 
    <div class="panel-heading"> 
     <h5 class="panel-title">Filter Visitors</h5> 
     <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span> 
    </div> 
    <div class="panel-body collapse"> 
     <div class="col-lg-4 col-md-4"> 
      To save this search please enter a title:<br /> 
      <input id="titleFilter" class="form-control" placeholder="E.g. Visits by Date" /><br /> 

      Visit:<br /> 
      <input id="visitFilter" class="form-control" placeholder="E.g. 1" /><br /> 

      DNS:<br /> 
      <input class="form-control" placeholder="E.g. parkersoft.co.uk" id="dnsFilter" /><br /> 

      Date/Time:<br /> 
      <div class="input-group date" id="datetimepicker1"> 
       <input type="text" class="form-control" id="visitDateFilter" placeholder="Click the calendar to choose a date" /> 
       <span class="input-group-addon"> 
        <span class="fa fa-calendar"></span> 
       </span> 
      </div> 

     </div> 
     <div class="col-lg-4 col-md-4"> 
      Entry Page<br /> 
      <input class="form-control" placeholder="E.g. default.aspx" id="entryPageFilter" /><br /> 
      Minutes on<br /> 
      <div class="form-inline"> 
       <div class="form-group"> 
        <input class="form-control" id="timeOnSiteFilter" placeholder="E.g. 20" /> 
       </div> 
       <div class="form-group"> 
        <select id="timeonSiteSelector" class="form-control"> 
         <option value="1">Exactly</option> 
         <option value="2">Over</option> 
         <option value="3">Under</option> 
        </select>` 
       </div> 
      </div><br /> 
      Pages<br /> 
      <input class="form-control" id="pagesFilter" placeholder="E.g. 25" /><br /> 
      Cost<br /> 
      <div class="input-group"> 
       <div class="input-group-addon">£</div> 
       <input type="text" class="form-control" id="costFilter" placeholder="00" /> 
       <div class="input-group-addon">.00</div> 
      </div> 
     </div> 
     <div class="col-lg-4 col-md-4"> 
      Location<br /> 
       <div class="form-group"> 
        <select class="form-control" id="countryFilter"></select> 
       </div> 
      Keywords<br /> 
      <input class="form-control" placeholder="E.g. Whos On" id="keywordsFilter" /><br /> 
      Referrer 
      <input class="form-control" placeholder="E.g. http://www.example.com/" id="referrerFilter" /><br /> 

      <input type="button" id="filter" class="btn btn-info" value="Filter Visitors" /> 
      <input type="button" id="save" class="btn btn-info" value="Save Search" /> 
      <input type="button" id="clear" class="btn btn-info" value="Clear" /> 
      <input type="button" id="reset" class="btn btn-info" value="Reset" /> 
     </div> 
    </div> 
</div> 

Answer 1

您錯過了應包含面板的panel-group。 Bootstrap Accordion文檔。

function toggleChevron(e) { 
 
    $(e.target) 
 
    .prev('.panel-heading') 
 
    .find("span.indicator") 
 
    .toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); 
 
} 
 
$('#accordion').on('hidden.bs.collapse', toggleChevron); 
 
$('#accordion').on('shown.bs.collapse', toggleChevron);

.panel-heading { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel-group" id="accordion"> 
 
    <div id="VisitFilterPanel" class="panel panel-info"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
     <h5 class="panel-title"> <a class="accordion-toggle"> Filter Visitors 
 
     <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span></a></h5> 
 

 
    </div> 
 
    <div class="panel-body collapse" id="collapseOne"> 
 
     <div class="col-lg-4 col-md-4">To save this search please enter a title: 
 
     <br /> 
 
     <input id="titleFilter" class="form-control" placeholder="E.g. Visits by Date" /> 
 
     <br />Visit: 
 
     <br /> 
 
     <input id="visitFilter" class="form-control" placeholder="E.g. 1" /> 
 
     <br />DNS: 
 
     <br /> 
 
     <input class="form-control" placeholder="E.g. parkersoft.co.uk" id="dnsFilter" /> 
 
     <br />Date/Time: 
 
     <br /> 
 
     <div class="input-group date" id="datetimepicker1"> 
 
      <input type="text" class="form-control" id="visitDateFilter" placeholder="Click the calendar to choose a date" /> <span class="input-group-addon"> <span class="fa fa-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4">Entry Page 
 
     <br /> 
 
     <input class="form-control" placeholder="E.g. default.aspx" id="entryPageFilter" /> 
 
     <br />Minutes on 
 
     <br /> 
 
     <div class="form-inline"> 
 
      <div class="form-group"> 
 
      <input class="form-control" id="timeOnSiteFilter" placeholder="E.g. 20" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <select id="timeonSiteSelector" class="form-control"> 
 
       <option value="1">Exactly</option> 
 
       <option value="2">Over</option> 
 
       <option value="3">Under</option> 
 
      </select>`</div> 
 
     </div> 
 
     <br />Pages 
 
     <br /> 
 
     <input class="form-control" id="pagesFilter" placeholder="E.g. 25" /> 
 
     <br />Cost 
 
     <br /> 
 
     <div class="input-group"> 
 
      <div class="input-group-addon">£</div> 
 
      <input type="text" class="form-control" id="costFilter" placeholder="00" /> 
 
      <div class="input-group-addon">.00</div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4">Location 
 
     <br /> 
 
     <div class="form-group"> 
 
      <select class="form-control" id="countryFilter"></select> 
 
     </div>Keywords 
 
     <br /> 
 
     <input class="form-control" placeholder="E.g. Whos On" id="keywordsFilter" /> 
 
     <br />Referrer 
 
     <input class="form-control" placeholder="E.g. http://www.example.com/" id="referrerFilter" /> 
 
     <br /> 
 
     <input type="button" id="filter" class="btn btn-info" value="Filter Visitors" /> 
 
     <input type="button" id="save" class="btn btn-info" value="Save Search" /> 
 
     <input type="button" id="clear" class="btn btn-info" value="Clear" /> 
 
     <input type="button" id="reset" class="btn btn-info" value="Reset" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

添加panel-collapsed您<span class="pull-right clickable">。然後它會在第一次點擊時工作。這裏有一個小提琴讓你審查。 http://jsfiddle.net/pnfLtb6w/