Twitter引导程序：在开放式手风琴标题中添加一个类
我是一个jquery / javascript新手。 我想要做的是在开放式手风琴标题中添加一个类，并在打开另一个时删除它。
inheritance人代码：
我附在页面上的脚本是
所以我想要的是在菜单打开时（手风琴式）将.active类添加到a.accordion-toggle，然后一旦选择了另一个就让它消失。 我看过这里的文档引导程序，但它似乎没有帮助我很多（因为我不知道如何处理
$（’＃myCollapsible’）。on（’hidden’，function（）{//做某事……}）
或者在哪里放置它）我也尝试过.addClass（） jquery加法器，但我只能得到javascript版本document.getElementById（“accordion-heading”）。className + =“newClass”; 工作（如果我给手风琴组冠军一个ID，但在这种情况下会有多个手风琴组）当我把脚本放在div层之后。
您可以使用折叠事件。
$(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'); }); });
这是一个JsFiddle http://jsfiddle.net/D2RLR/251/
这是我解决这个问题的方法。 基于上面的一些很好的答案，但适用于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'); });
我也想要添加一个“活动”类或类似但我在检查期间注意到，当非活动状态时，所有链接都有一个“折叠”类，当选择了选项卡/链接时，它会被删除，因此我只是在没有选项卡的情况下调整选项卡。 “倒塌”课程。
我尝试过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'); } }); });
如果手风琴标题已经没有活动类，则所有手风琴标题和主体都会丢失活动类，并且已经单击的那个和它相应的主体标签将获得添加的类。
如果它已经使该类处于活动状态（因此，如果它已经打开并被单击），则会删除活动类，并且不会发生任何其他情况。
只需检查BS代码添加的折叠类：
$('a.accordion-toggle').on('click', function () { if( $(this).hasClass('collapsed') !== true ){ $(this).removeClass('active'); }else{ $(this).addClass('active'); } });
我认为这是迄今为止最简单的方法。
$('a.accordion-toggle').on('click', function () { $('a.accordion-toggle').removeClass('active'); $(this).addClass('active'); });
我认为如果你把它放在你的javascript上会有用：
$('.accordion-toggle').on('shown', function () { $(this).addClass('active') }); $('.accordion-toggle').on('hidden', function () { $(this).removeClass('active') });
class 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' }) }); });
这适用于我使用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'); }); });
https://jsfiddle.net/u2ay67Lo/6/
HTML
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.
Peças escritas e desenhadas (39.5 MB)
Formulário de Participação (101 KB) 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.
Peças escritas e desenhadas (39.5 MB)
Formulário de Participação (101 KB) 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.
Peças escritas e desenhadas (39.5 MB)
Formulário de Participação (101 KB) 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.
File1 (39.5 MB)
Formulário de Participação (101 KB)
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; }
需要： jquery.min.js，jquery.min.js，bootstrap.min.css，bootstrap-theme.min.css和bootstrap.min.js
这对我有用..
$('.panel-default').on('show.bs.collapse', function () { $('.panel-heading').addClass('active'); }); $('.panel-default').on('hide.bs.collapse', function () { $('.panel-heading').removeClass('active'); });