Twitter bootstrap: agregar una clase al título abierto del acordeón

Question

Soy un jquery/javascript novato. Lo que quiero hacer es agregar una clase al título abierto del acordeón y eliminarlo cuando abro otro.

aquí está 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 guiones que he conectado 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> 

Así que lo que estaba buscando era añadir la clase .active a a.accordion -alterna siempre que el menú esté abierto (estilo acordeón), y luego haz que desaparezca una vez que se selecciona otro. He mirado en la documentación para arrancar here, pero no se parece a ayudarme mucho (ya no sé qué hacer con los

$ ('# myCollapsible'). En (' oculto', function() {// hacer algo ...})

o dónde colocarlo) también he probado la .addClass() sumador de jQuery, pero sólo pude obtener la versión javascript document.getElementById ("acordeón-título"). className + = "newClass"; para trabajar (si le di al título del grupo de acordeón una ID, pero en este caso habrá varios grupos de acordeón) cuando coloque el script justo después de la capa de div.

Answer 1

Puede utilizar los eventos de este 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'); 
    }); 

});​ 

Aquí hay una jsFiddle http://jsfiddle.net/D2RLR/251/

Answer 2

creo que funcionaría si se pone esto en su javascript:

$('.accordion-toggle').on('shown', function() { 
$(this).addClass('active') }); 

$('.accordion-toggle').on('hidden', function() { 
$(this).removeClass('active') }); 

Answer 3

He intentado la solución de Michael D. Irizarry, pero que no funcionó para mí. Así me ocurrió con 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 acordeón-encabezamiento ya no tiene una clase de activo, todos los cuerpos de acordeón-encabezamientos & perder la clase activa, y la que se ha hecho clic y su correspondiente etiqueta corporal obtendrá la clase agregada.

Si ya tiene la clase activa (por lo tanto, si ya está abierta y se ha hecho clic en ella), se elimina la clase activa y no sucede nada más.

Answer 4

Simplemente marca para la clase colapsado añadido por el Código BS:

$('a.accordion-toggle').on('click', function() { 
    if($(this).hasClass('collapsed') !== true){ 
     $(this).removeClass('active'); 
    }else{ 
     $(this).addClass('active'); 
    } 
}); 

Answer 5

aquí está mi solución a este problema. Sobre la base de algunas de las grandes respuestas anteriores, pero adaptado 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'); 
    }); 

Answer 6

Esto funciona para mí ..

$('.panel-default').on('show.bs.collapse', function() { 
    $('.panel-heading').addClass('active'); 
}); 

$('.panel-default').on('hide.bs.collapse', function() { 
    $('.panel-heading').removeClass('active'); 
}); 

Answer 7

Creo que esta es la manera más simple hasta el momento.

$('a.accordion-toggle').on('click', function() { 
    $('a.accordion-toggle').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 8

También estaba buscando para agregar una clase de "activo" o similar, pero me di cuenta durante la inspección que cuando inactivos todos los enlaces tienen una clase de "colapsado" que se retira cuando se selecciona la pestaña/enlace, por lo tanto Simplemente marqué la pestaña sin la clase "colapsado".

Answer 9

clase Dont activa dan lástima pues el elemento en menos archivos de esta clase cambió hay que darle CSS en lugar de clase. este código es mejor trabajar y se puede añadir otro css que requiere

$(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' }) 
    }); 
     }); 

Answer 10

Esto funciona para mí 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'); 
    }); 
     }); 

Answer 11

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, de arranque-theme.min.css y bootstrap.min.js