Bootstrap di Twitter: aggiunta di una classe al titolo di fisarmonica aperto

Question

Sono un principiante jquery/javascript. Quello che voglio fare è aggiungere una classe al titolo della fisarmonica aperto e rimuoverla quando ne apro un'altra.

Heres il codice:

<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--> 

Gli script che ho attaccato con la pagina sono

<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> 

Quindi quello che cercavo era quello di aggiungere la classe .active a a.accordion -Connetti quando il menu è aperto (stile fisarmonica), e poi fallo sparire una volta selezionato un altro. Ho guardato la documentazione per l'avvio here, ma Non sembra di aiutarmi molto (dato che non so cosa fare con i

$ ('# myCollapsible'). On (' nascosta', function() {// fare qualcosa ...})

o dove collocarlo) ho anche provato il .addClass() jquery vipera, ma ho potuto solo ottenere la versione javascript document.getElementById ("accordion-heading"). className + = "newClass"; per lavorare (se ho dato un ID al fisarmonica, ma in questo caso ci saranno più gruppi fisarmonica) quando inserisco lo script subito dopo il livello div.

Answer 1

È possibile utilizzare gli eventi Comprimi per questo.

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

});​ 

Ecco un JsFiddle http://jsfiddle.net/D2RLR/251/

Answer 2

penso che avrebbe funzionato se mettete questo sulla vostra javascript:

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

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

Answer 3

Ho provato la soluzione di Michael D. Irizarry, ma che non ha funzionato per me. Così mi si avvicinò con il mio codice:

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

Se la fisarmonica-intestazione già non ha una classe di attivo, tutti i corpi fisarmonica intestazioni & perdere la classe di attivo, e quello che è stato fatto clic e il suo tag body corrispondente otterrà la classe aggiunta.

Se ha già la classe attiva (quindi se è già aperta e cliccata), la classe attiva viene rimossa e non accade nient'altro.

Answer 4

semplicemente controllare per la classe crollato aggiunto dal Codice BS:

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

Answer 5

Ecco la mia soluzione a questo problema. Sulla base di alcune delle grandi risposte di cui sopra, ma adattato per lavorare 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

Questo funziona per me ..

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

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

Answer 7

penso che questo sia il modo più semplice fino ad ora.

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

Answer 8

ero anche cercando di aggiungere una classe "attivo" o simile, ma ho notato durante l'ispezione che quando inattive tutti i link hanno una classe di "collassata" che viene rimosso quando viene selezionata la scheda/link, così Ho semplicemente tageted la scheda senza la classe "collapsed".

Answer 9

classe attiva non dare l'oggetto perché in meno file questa classe modificata devi dargli css al posto della classe. questo codice è di lavorare meglio e si può aggiungere un altro CSS che avete richiesto

$(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

Questo funziona per me 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; 
} 

Bisogni: jquery.min.js, jquery.min.js, bootstrap.min.css, bootstrap-theme.min.css e bootstrap.min.js