javascript - example - Twitter bootstrap: agregar una clase al título de acordeón abierto
data-toggle tooltip (11)
Soy un novato jquery / javascript. Lo que quiero hacer es agregar una clase al título de acordeón abierto y eliminarlo cuando abro otra.
Heres el código:
<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-->
Los scripts que he adjuntado con la página son.
<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>
Entonces, lo que buscaba era agregar la clase .active a a.accordion-toggle siempre que el menú esté abierto (estilo acordeón), y luego hacer que desaparezca una vez que se seleccione otro. He mirado la documentación para arrancar here , pero no parece ayudarme mucho (ya que no sé qué hacer con el
$ (''# myCollapsible''). en (''oculto'', función () {// hacer algo ...})
o dónde colocarlo) También probé el sumador jquery .addClass () , pero solo pude obtener la versión de javascript document.getElementById ("accordion-heading"). className + = "newClass"; para trabajar (si le di una identificación al título del grupo de acordeón, pero en este caso habrá varios grupos de acordeón) cuando coloque el script justo después de la capa div.
Aquí está mi solución a este problema. Basado en algunas de las grandes respuestas anteriores, pero adaptadas para trabajar con 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'');
});
Creo que esta es la forma más simple hasta ahora.
$(''a.accordion-toggle'').on(''click'', function () {
$(''a.accordion-toggle'').removeClass(''active'');
$(this).addClass(''active'');
});
Creo que funcionaría si pones esto en tu javascript:
$(''.accordion-toggle'').on(''shown'', function () {
$(this).addClass(''active'') });
$(''.accordion-toggle'').on(''hidden'', function () {
$(this).removeClass(''active'') });
Esto funciona para mi ..
$(''.panel-default'').on(''show.bs.collapse'', function () {
$(''.panel-heading'').addClass(''active'');
});
$(''.panel-default'').on(''hide.bs.collapse'', function () {
$(''.panel-heading'').removeClass(''active'');
});
Esto me funciona usando 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'');
});
});
He intentado la solución de Michael D. Irizarry pero eso no funcionó para mí. Entonces se me ocurrió mi propio código:
$(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'');
}
});
});
Si el encabezado de acordeón ya no tiene una clase de activo, todos los encabezados y cuerpos de acordeón pierden la clase activa, y en la que se ha hecho clic y su etiqueta de cuerpo correspondiente se agregará la clase.
Si ya tiene la clase activa (por lo tanto, si ya está abierta y se ha hecho clic en ella), la clase activa se elimina y no ocurre nada más.
La clase activa no le da el elemento porque en menos archivos esta clase cambió, tiene que darle css en lugar de clase. Este código funciona mejor y puede agregar otro css que requiera
$(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'' })
});
});
Puedes usar los eventos Colapsar para esto.
$(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'');
});
});
Aquí hay un JsFiddle http://jsfiddle.net/D2RLR/251/
También estaba buscando agregar una clase "activa" o similar, pero noté durante la inspección que cuando están inactivos, todos los enlaces tienen una clase de "colapsada" que se elimina cuando se selecciona la pestaña / enlace, por lo que simplemente etiqueté la pestaña sin la etiqueta Clase "colapsada".
simplemente revise la clase colapsada agregada por el Código BS:
$(''a.accordion-toggle'').on(''click'', function () {
if( $(this).hasClass(''collapsed'') !== true ){
$(this).removeClass(''active'');
}else{
$(this).addClass(''active'');
}
});
https://jsfiddle.net/u2ay67Lo/6/
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
$(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
.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;
}
Necesidades: jquery.min.js, jquery.min.js, bootstrap.min.css, bootstrap-theme.min.css y bootstrap.min.js