Twitter引導：向開放式手風琴標題添加一個類

Question

我是一個jquery/javascript新手。我想要做的是在開放式手風琴標題中添加一個類，並在打開另一個時刪除它。

繼承人的代碼：

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

我重視與網頁中的腳本是

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

所以，我一直在尋找的是，增添。主動類a.accordion - 當菜單打開（手風琴風格）時關閉，然後在選擇另一個菜單後消失。我看了看文檔，以引導here，但它似乎沒有幫我出了很多（因爲我不知道做什麼用的

做$（「＃myCollapsible」）。在（」隱藏」，函數（）{//做一些事情...}）

或在哪裏把它）我也試過.addClass（） jQuery的加法器，但我只得到了JavaScript版本document.getElementById（「accordion-heading」）。className + =「newClass」;工作時（如果我給手風琴組標題一個ID，但在這種情況下，會有多個手風琴組），當我把劇本放在div層後面時。

Answer 1

您可以使用此塌方事件。

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

Answer 2

我想，如果你把這個在您的JavaScript它會工作：

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

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

Answer 3

我已經試過邁克爾·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'); 
     } 
    }); 
}); 

如果手風琴狀標題已經沒有一類的活動的，所有的手風琴標題&的身體失去活動類，並且已經被點擊了一個和它的相應的身體標記將得到類添加。

如果它已經有活動類（所以如果它已經打開並被點擊），那麼活動類將被刪除並且不會發生任何其他事情。

Answer 4

簡單地檢查由BS代碼添加摺疊類：

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

Answer 5

這裏是我解決這個問題。基於上面的一些偉大的答案的，但適應與引導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

這工作對我來說，工作..

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

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

Answer 7

我覺得這是迄今爲止最簡單的方法。

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

Answer 8

我也尋找添加「有效的」類或類似的，但檢查時我注意到，當非活動狀態的所有鏈路有一個類的「坍塌」被選擇的標籤/鏈接時被移除，從而我只是在沒有「摺疊」類的情況下對標籤進行標註。

Answer 9

類活動不要給項目becouse在更少的文件這個類改變 你必須給它的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' }) 
    }); 
     }); 

Answer 10

這工作我用引導3.3.6另一個CSS，

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

需求： jquery.min.js，jquery.min.js，bootstrap.min.css，引導，theme.min.css和bootstrap.min.js