我有一个可折叠的面板，我想加载关闭，但是当我这样做时，它不会在第一次点击时打开，需要两次打开它。
我用来打开和关闭面板的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>
答案 0 :(得分：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>
答案 1 :(得分：0)
将panel-collapsed添加到<span class="pull-right clickable">。然后它将在第一次点击时工作。这是一个小提琴，供您查看。 http://jsfiddle.net/pnfLtb6w/