更改自舉的手風琴

Question

我正在設計中，我需要根據附加圖像accordian，我試過使用jquery。目前看是鏈接：

http://themekart.com/demo/spasalon/shortcode.html

我們要改變文本的顏色和+/-上打開或關閉手風琴？

我們怎樣才能做到這一點，請幫助我們

謝謝...

Answer 1

如果你想一些JS來創造這一切對你來說，

檢查DEMO http://jsfiddle.net/yeyene/BhBHf/5/

JS

$(document).ready(function(){ 
    $('.accordion .accordion-toggle').each(function(){ 
     $(this).html('<span class="plus">+</span>'+$(this).text()); 
    }); 
    $('.accordion a').on('click',function(){ 
     var cur = $(this).children('.plus').text(); 
     // set all to default state 
     $('.accordion a').children('.plus').text('+'); 
     $('.accordion a').css({'color':'#666'}); 
     // then, change style of current one   
     if(cur=='+'){ 
      $(this).children('.plus').text('-'); 
      $(this).css({'color':'red'}); 
     } 
     else{ 
      $(this).children('.plus').text('+'); 
      $(this).css({'color':'#666'}); 
     } 
    }); 
}); 

CSS

.plus { 
    float:left; 
    width:20px; 
    height:20px; 
    text-align:center; 
    font-size:18px; 
    font-weight:bold; 
    border:1px solid #dfdfdf; 
    background:#fff; 
    margin:0 5px 0 0; 
    color:#666; 
} 

Answer 2

這是所有的CSS業務。 您可以使.accordion-toggle爲紅色，.accordion-toggle.collapsed爲灰色。至於像你既可以把一個<img>標籤中的鏈接的前面或賦予其利潤率，並使用CSS來把正/負（使用上述相同的標準。）

的CSS：

.accordion-toggle{ 
    color:red; 
} 

.accordion-toggle.collapsed { 
    color:gray; 
} 

而對於圖標你可以使用twitter引導圖標。

<i class="icon-minus"></i> 
<i class="icon-plus"></i> 

Answer 3

你可以改變te的顏色xt使用類.accordion-toggle，從bootstrap.css開始，第6082行。我不建議你編輯引導文件。相反，你可以在Bootstrap（bootstrap.css）之後包含你的css（my-own-style.css），這樣你就可以通過重新定義它們來覆蓋規則。

如果您使用SASS，則可以在導入引導之前更改變量。閱讀： http://twitter.github.com/bootstrap/customize.html#variables

關於+/-按鈕，你可以使用這樣的切換按鈕類： http://pastebin.com/y4RxdEgH

如果你的按鈕類是圖標字形向上和圖標chevron-下。