[英]Bootstrap 3 : Accordion Chevron Icon pointing up or down
sorry for my english. 对不起我的英语不好。 First, what is wrong in the script?
首先,脚本中有什么问题? The chevron doesn't change.
人字形不变。 I'm not a web master.
我不是网站管理员。 I'm a beginner.
我是初学者。 Thanks a lot.
非常感谢。
This is my template : 这是我的模板:
<div class="panel-heading">
<div class="panel-title">Tableau de bord
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-user"></i><a href="#">Information</a></li>
<li class="list-group-item"><i class="fa fa-power-off"></i><a href="#">Log out</a></li>
</ul><!--/.list-group-->
</div><!--/collapseOne-->
<div class="panel-footer">
<div class="panel-title">Archives
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<ul class="list-group" style="margin-bottom:0">
<li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2015</a></li>
<li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2014</a></li>
</ul><!--/.list-group-->
</div><!--/collapseTwo-->
</div><!--/.panel-blue-->
</div><!--/.panel-group accordion-->
and this is the script : 这是脚本:
<script>
$('.clickable').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-title').slideUp();
$this.addClass('panel-collapse');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel').slideDown();
$this.removeClass('.panel-title');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
</script>
I replaced the two lines addClass/removeClass by a toggleClass which do the same, and it seems to work : http://jsfiddle.net/FLZpk/1/ 我用一个相同的toggleClass替换了两行addClass / removeClass,它似乎起作用了: http : //jsfiddle.net/FLZpk/1/
$('.clickable').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-title').slideUp();
$this.addClass('panel-collapse');
} else {
$this.parents('.panel').find('.panel').slideDown();
$this.removeClass('.panel-title');
}
$this.find('i').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
})
jQuery toggleClass doc : https://api.jquery.com/toggleClass/ jQuery toggleClass doc: https : //api.jquery.com/toggleClass/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.