我使用自举手风琴，第一个面板始终打开，面板打开， 。我正在检查我的jquery代码，看看该类是否包含 中的类突出显示该锚点。但目前所有锚点都会突出显示。
我只是希望第一个锚点突出显示是打开的，而休息关闭面板应该有一些不同的样式。
这里是小提琴：Fiddle
如您所见，所有锚标记都会突出显示。我想要第一个锚来获得一些不同的造型。整个想法是为手风琴添加加/减符号。
答案 0 :(得分：8)
对上面的@Arun P Johny答案做了一点修改
首先：根据Bootstrap 3文档将<i>更改为<span>标记
第二次：为用户关闭打开标签，删除课程并将减号图标更改为加号图标添加了第二次事件检查
var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
$('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
答案 1 :(得分：7)
尝试collapse - bootstrap 3 +
的show事件jQuery(function ($) {
var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
$('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
$('#accordion').on('show.bs.collapse', function (e) {
$('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
})
});
然后
.panel-heading.active {
background-color: green;
}
演示：Fiddle
在您的代码中
$(document).ready(function () {
if ($('div').filter(':not(in)')) {
$('.panel-title a').addClass('active');
}
});
filter（）方法返回一个jQuery对象，因此它总是很简洁，你也可以将类添加到标题中的所有锚元素，无论它是否处于活动状态，当手风琴时你也不会改变它已更改
答案 2 :(得分：6)
如果你想在折叠同一个面板上更改加/减类，那么你可以用这种方式使用javascript（也可以在多个面板上工作）
<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
$(function ($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
})
});
</script>
它适用于此html块
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
检查这个jsFiddle示例http://jsfiddle.net/navjottomer/8u57u/4/
答案 3 :(得分：6)
Working example! 您可以将折叠的标准类添加到所有选项卡，然后只使用这样的CSS：
.subnav-button .glyphicon-plus:before {
content: "\2212";
}
.collapsed .glyphicon-plus:before {
content: "\2b";
}
其中.subnav-button是您所需的按钮类并使用标准引导程序图标。只要折叠的类不在您的按钮上（这恰好是标签没有折叠的时候），则plus的内容将被减去的内容替换。
这是开头的HTML代码：
<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
<li class="renoi-first-floor">
Sitemap
<span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
</li>
</button>
唯一的缺点是，您不能再次使用折叠标签中的加号图标而不会更改为减号。如果你想要的话，你当然可以将课程复制到这样的新课程：
.glyphicon-accordion-plus-minus < .glyphicon-plus
将我的帖子开头的CSS更改为新类，然后在手风琴的HTML代码中使用新类，而不仅仅是glyphicon-plus。
答案 4 :(得分：2)
这是我的css
.my-button.collapse-nav-button:before {
content: "\2212";
}
.collapsed .my-button.collapse-nav-button:before {
content: "\2b";
}
这是我的按钮
<span class="my-button collapse-nav-button"></span>
这是我的手风琴html与上面的按钮
<div class="panel panel-default" ng-repeat="list in table_models">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse1">
<h1 class="panel-title">
<span class="my-button collapse-nav-button"></span>
<a data-toggle="collapse" data-target="#colapse1" href="#">Open/Close</a>
</h1>
</div>
<div class="panel-collapse collapse fade" id="collapse1">
<div class="panel-body">
<!--Accordion body -->
</div>
</div>
</div>
有人以同样的方式回答了这个问题，但是没有人投票给他，也没有结束它有下行的引用。我不知道他在谈论什么样的缺点。但是我想，虽然我投票给他，但不是编辑，而是让我们添加一个简洁的答案。 我建议不应该为此进行javascript编码。因为它可以很容易地用css和html完成，所以为什么要乱丢你的页面。？
答案 5 :(得分：1)
我用几行html和css完成了这个。
a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
display: none;
}<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>
只需将span标记放入您想要加号或减号的HTML中，然后将css规则添加到样式表中。如果使用bootstrap 3或更早版本，则可以使用glyphicons而不是我使用的纯文本加减。这似乎是最简单的解决方案。
答案 6 :(得分：0)
为：活动列表添加背景颜色将为您提供所需的区别，但如果您确实需要按钮，则bootstrap会使用glyphicons。这就是我对我做的事情，看起来很不错
<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
答案 7 :(得分：0)
是的，只是另一个答案，但在我的情况下，如果您有或没有数据父母有助于存档一个开放且所有左边都关闭，它将起作用。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" href=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="glyphicon glyphicon-minus"></i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div class="panel-collapse collapse in collapseOne" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href=".collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="glyphicon glyphicon-plus"></i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div class="panel-collapse collapse collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href=".collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="glyphicon glyphicon-plus"></i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div class="panel-collapse collapse collapseThree" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<script>
jQuery(function ($) {
$('[data-toggle="collapse"]').on('click', function() {
var $this = $(this),
$parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
if($parent === undefined) { /* Just toggle my */
$this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
return true;
}
/* Open element will be close if parent !== undefined */
var currentIcon = $this.find('.glyphicon');
currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
$parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});
</script>
答案 8 :(得分：0)
好的，这需要新的答案，因为Twitter Bootstrap和jQuery改变了很多东西，你需要自动化：
(function($) {
$(document).ready(function(){
if($(".collapse.in").length)
{
$(".collapse.in").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-down pull-left"></span> ');
}
else
{
$(".collapse").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-right pull-left"></span> ');
}
$('.panel-collapse').on({
'hidden.bs.collapse' : function (e) {
var active = $(this).prev().find(".panel-title a .glyphicon");
active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
},
'show.bs.collapse' : function (e) {
var active = $(this).prev().find(".panel-title a .glyphicon");
active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
}
});
});
})(jQuery);
与Twitter Bootstrap版本3.x和jQuery 1.10.3以及其他所有内容完美配合。
答案 9 :(得分：0)
演示https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion-with-plus-minus-icon
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
}); .bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
</style>
<div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
</div>