我使用引导手风琴，其中第一个面板始终打开，打开的面板获得一个类 in 。我正在从我的 jquery 代码中检查该类是否包含 class in 它突出显示了该 anchor 。但目前所有的锚点都高亮显示。
我只想突出显示打开的第一个锚点，而其余关闭的面板应该有一些不同的样式。
这里是小提琴：Fiddle
如您所见，所有锚标记都突出显示。我希望第一个锚获得一些不同的样式。整个想法是在手风琴上添加加号/减号。
【问题讨论】：
标签： jquery html css twitter-bootstrap-3
对上面的@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');
});
【讨论】：
#accordion）一样简单，每个手风琴都将被单独处理。我需要查看您的代码以了解它在哪里失败
试试collapse的show event - bootstrap 3+
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 对象，因此它始终是真实的，而且你正在将类添加到标题中的所有锚元素，无论它是否处于活动状态，你也不会在手风琴时更改它变了
【讨论】：
如果您想在折叠同一面板时更改加/减类，则可以通过这种方式使用 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/
【讨论】：
Working example! 您可以将折叠的标准类添加到所有选项卡，然后像这样使用 CSS：
.subnav-button .glyphicon-plus:before {
content: "\2212";
}
.collapsed .glyphicon-plus:before {
content: "\2b";
}
其中 .subnav-button 是您想要的按钮类并使用标准引导图标。只要折叠的类不在您的按钮上（这正是标签未折叠的时候），加号的内容就会被减号的内容替换。
这是开头的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。
【讨论】：
这是我的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 完成，所以为什么要乱扔你的页面。？
【讨论】：
我可以用几行 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 而不是我使用的纯文本加减号。这似乎是最简单的解决方案。
【讨论】：
演示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>【讨论】：
为 :active 列表添加背景颜色会给你一个你正在寻找的差异化，但如果你真的想要一个按钮，bootstrap 使用 glyphicons。这是我对我的做的，看起来不错
<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
【讨论】：
是的，只是另一个答案，但在我的情况下，如果您有或没有数据父级，它会起作用，这有助于归档一个打开的并且所有左侧都关闭。
<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>
【讨论】：
好的，这需要新的答案，因为 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 以及以上所有版本一起使用。
【讨论】：