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