Javascript Twitter 引导程序：向打开的手风琴标题添加一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10918801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap: adding a class to the open accordion title
提问by tgunnoe
I am a jquery/javascript newbie. What I want to do is add a class to the open accordion title, and remove it when i open another.
我是一个 jquery/javascript 新手。我想要做的是在打开的手风琴标题中添加一个类，并在我打开另一个时将其删除。
heres the code:
继承人的代码：
<div class="accordion" data-collapse-type="manual" id="parent">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
</a>
</div><!--/accordion-heading-->
<div id="category1" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink"><a href="">Open Link 1</a></li>
<li id="" class="sidelink"><a href="">Open Link 2</a></li>
<li id="" class="sidelink"><a href="">Open Link 3</a></li>
</ul>
</div><!--/category1-->
</div><!--/accordion-group-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" href="#Category2">Category 2</a>
</div><!--/accordion-heading-->
</div><!--/accordion-group-->
</div><!--/accordion-->
The scripts I have attached with the page are
我随页面附上的脚本是
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
So what I was looking for was to add the .activeclass to a.accordion-toggle whenever the menu is open (accordion style), and then have it go away once another is selected. I've looked at the documentation to bootstrap here, but it doesnt seem to help me out a lot (since I don't know what to do with the
所以我正在寻找的是在菜单打开时将.active类添加到 a.accordion-toggle （手风琴样式），然后在选择另一个时让它消失。我已经查看了此处的引导程序文档，但它似乎对我没有太大帮助（因为我不知道如何处理
$('#myCollapsible').on('hidden', function () { // do something… })
$('#myCollapsible').on('hidden', function () { // 做点什么... })
or where to place it) I've also tried the .addClass()jquery adder, but I could only get the javascript version document.getElementById("accordion-heading").className += " newClass";to work (if I gave the accordion group title an ID, but in this case there will be multiple accordion groups) when I put the script right after the div layer.
或放在哪里）我也试过.addClass()jquery adder，但我只能得到 javascript 版本document.getElementById("accordion-heading").className += "newClass"; 工作（如果我给手风琴组标题一个 ID，但在这种情况下会有多个手风琴组）当我把脚本放在 div 层之后。
回答by Michael D. Irizarry
You can use the Collapse events for this.
您可以为此使用 Collapse 事件。
$(function() {
$('.accordion').on('show', function (e) {
$(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
});
$('.accordion').on('hide', function (e) {
$(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
});
});?
Here's a JsFiddle http://jsfiddle.net/D2RLR/251/
这是一个 JsFiddle http://jsfiddle.net/D2RLR/251/
回答by Pim
Here's my solution to this problem. Based on some of the great answers above, but adapted to work with Bootstrap 3.1.x
这是我对这个问题的解决方案。基于上面的一些很好的答案，但适用于 Bootstrap 3.1.x
$('#accordion')
.on('show.bs.collapse', function(e) {
$(e.target).prev('.panel-heading').addClass('active');
})
.on('hide.bs.collapse', function(e) {
$(e.target).prev('.panel-heading').removeClass('active');
});
回答by Ichimonban
I was also Looking to add an "active" class or similar but I noticed during inspection that when inactive all the links have a class of "collapsed" that is removed when the tab/link is selected, thus I simply tageted the tab without the "collapsed" class.
我也想添加一个“活动”类或类似的，但我在检查过程中注意到，当所有链接处于非活动状态时，所有链接都有一个“折叠”类，在选择选项卡/链接时会被删除，因此我只是简单地标记了没有“崩溃”类。
回答by Veltar
I've tried Michael D. Irizarry's solution but that didn't work for me. So I came up with my own code:
我试过 Michael D. Irizarry 的解决方案，但这对我不起作用。所以我想出了我自己的代码：
$(function() {
$('a.accordion-toggle').click(function(e) {
e.preventDefault();
if(!$(this).parent().hasClass('active')) {
$('.accordion-heading').removeClass('active');
$('.accordion-body').removeClass('active');
$(this).parent().addClass('active').next().addClass('active');
} else {
$('.accordion-heading').removeClass('active');
$('.accordion-body').removeClass('active');
}
});
});
If the accordion-heading already does not have a class of active, all accordion-headings & bodies lose the active class, and the one that has been clicked and it's corresponding body tag will get the class added.
如果手风琴标题已经没有活动类，则所有手风琴标题和正文都将失去活动类，而被点击的标题及其相应的正文标签将添加该类。
If it already has the class active (so if it is already open and been clicked) then the active class is removed and nothing else happens.
如果它已经具有活动类（因此如果它已经打开并被单击），则活动类将被删除，并且不会发生其他任何事情。
回答by James Van Leuven
simply check for the collapsed class added by the BS Code:
只需检查 BS 代码添加的折叠类：
$('a.accordion-toggle').on('click', function () {
if( $(this).hasClass('collapsed') !== true ){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
});
回答by Kijan Maharjan
I think this is the simplest way so far.
我认为这是迄今为止最简单的方法。
$('a.accordion-toggle').on('click', function () {
$('a.accordion-toggle').removeClass('active');
$(this).addClass('active');
});
回答by kamilo.cervantes
I think it would work if you put this on your javascript:
我认为如果你把它放在你的 javascript 上它会起作用：
$('.accordion-toggle').on('shown', function () {
$(this).addClass('active') });
$('.accordion-toggle').on('hidden', function () {
$(this).removeClass('active') });
回答by Mans 1212
class active dont give the item becouse in less files this class changed you have to give it css instead class. this code is work best and you can add another css that you required
类 active 不要给项目因为在较少的文件中这个类改变了你必须给它 css 而不是类。此代码效果最佳，您可以添加您需要的另一个 css
$(function () {
$('#accordion')
.on('show.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').css({'background-color': 'red','color':'white'})
})
.on('hide.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').css({ 'background-color': '#b6ff00', 'color': 'black' })
});
});
回答by Rocky Chronister
This works for me using Bootstrap 3.3.6,
这对我使用 Bootstrap 3.3.6 有效，
$('#accordion')
.on('show.bs.collapse', function (e) {
$(e.target).parent('.panel').addClass('panel-primary');
})
.on('hide.bs.collapse', function (e) {
$(e.target).parent('.panel').removeClass('panel-primary');
});
});
回答by Ilídio Martins
https://jsfiddle.net/u2ay67Lo/6/
https://jsfiddle.net/u2ay67Lo/6/
HTML
HTML
<div id="accordion2" class="accordion panel-group">
<div class="accordion-group panel panel-default">
<div class="panel-heading accordion-heading">
<a href="#collapse5" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
Lorem ipsum dolor sit amet ..
</a>
</div>
<div class="accordion-body collapse" id="collapse5">
<div class="accordion-inner panel-body">
<div class="row">
<div class="col-md-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit faucibus elit nec mollis. Phasellus tempor urna tellus, eget lobortis magna porttitor eget. Sed risus ex, ultrices ac quam at, ultrices feugiat dolor. Mauris nec fermentum arcu.
<br>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Pe?as escritas e desenhadas (39.5 MB)</a>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participa??o (101 KB)</a>
</div>
<div class="col-md-2">
<button class="pull-right" href="#">Participa</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group panel panel-default">
<div class="panel-heading accordion-heading">
<a href="#collapse7" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
Donec vitae efficitur magna...
</a>
</div>
<div class="accordion-body collapse" id="collapse7">
<div class="accordion-inner panel-body">
<div class="row">
<div class="col-md-10">
Donec vitae efficitur magna, non iaculis sapien. Pellentesque ut leo turpis. Sed aliquet, lorem vel sollicitudin pretium, sapien augue rutrum risus, eu ultricies risus est in nibh. Etiam molestie non lorem in mollis. Cras non mi tempus, varius elit id,
ultrices diam. Vestibulum bibendum lacus vitae augue interdum, ut ultricies elit aliquam. Fusce rhoncus nunc convallis luctus ornare. Curabitur vulputate posuere ligula in eleifend. Vivamus commodo mi sed felis dignissim, rutrum pharetra odio
varius. Sed vel aliquet tortor. Nunc sit amet nibh eget sem elementum pulvinar. Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.
<br>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Pe?as escritas e desenhadas (39.5 MB)</a>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participa??o (101 KB)</a>
</div>
<div class="col-md-2">
<button class="pull-right" href="#">Participa</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group panel panel-default">
<div class="panel-heading accordion-heading">
<a href="#collapse8" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
Maecenas et felis at felis...
</a>
</div>
<div class="accordion-body collapse" id="collapse8">
<div class="accordion-inner panel-body">
<div class="row">
<div class="col-md-10">
Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo.
<br>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Pe?as escritas e desenhadas (39.5 MB)</a>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participa??o (101 KB)</a>
</div>
<div class="col-md-2">
<button class="pull-right" href="#">Button1</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group panel panel-default">
<div class="panel-heading accordion-heading">
<a href="#collapse9" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
Quisque placerat in dui quis vestibulum. ..
</a>
</div>
<div class="accordion-body collapse" id="collapse9">
<div class="accordion-inner panel-body">
<div class="row">
<div class="col-md-10">
Quisque placerat in dui quis vestibulum. Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo. Mauris commodo auctor tellus, at lobortis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Morbi fringilla lectus et urna blandit porta. Aliquam sed dolor gravida tellus pharetra laoreet in vel dolor. Sed cursus lacus vel metus porttitor, sed tempus enim pharetra. Vestibulum malesuada faucibus diam hendrerit
molestie. Aenean eget malesuada ipsum. Phasellus vitae erat at tellus aliquet sollicitudin. Integer nec neque nec felis egestas efficitur. Aliquam sodales est neque, in vulputate orci cursus in. Nunc ac leo suscipit, porttitor tellus non,
fermentum eros. Sed aliquet elit at est consequat, et semper risus porta.
<br>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">File1 (39.5 MB)</a>
<br>
<i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participa??o (101 KB)</a>
</div>
<div class="col-md-2">
<button class="pull-right" href="#">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
JavaScript
$(function() {
$('a.accordion-toggle').click(function(e) {
e.preventDefault();
if (!$(this).parent().hasClass('accordionPannelActive')) {
$('.accordion-heading').removeClass('accordionPannelActive').find('a').removeClass('accordionPannelActive');
$(this).parent().addClass('accordionPannelActive').find('a').addClass('accordionPannelActive');
} else {
$('.accordion-heading').removeClass('accordionPannelActive').next().removeClass('accordionPannelActive');
$(this).parent().find('a').removeClass('accordionPannelActive');
}
});
});
CSS
CSS
.accordionPannelActive {
background-color: #8dc640!important;
color: white !important;
}
a.accordion-title:focus {
color: inherit;
text-decoration: none;
}
.panel-default > .panel-heading {
background-image: none;
}
a.accordion-title:hover {
color: inherit;
background-color: inherit;
text-decoration: none;
}
.panel-default > .panel-heading {
background-image: none;
}
.panel-title{
display:block;
}
Needs:jquery.min.js, jquery.min.js, bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js
需要：jquery.min.js、jquery.min.js、bootstrap.min.css、bootstrap-theme.min.css 和 bootstrap.min.js
