更改Bootstrap手风琴

Question

我正在设计一个我需要accordian的设计，根据附图，我尝试使用jquery。目前的外观是链接：

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

我们想要在手风琴的开启或关闭时改变文字的颜色和+/-吗？

我们如何做到这一点请帮助我们

...谢谢

Answer 1

这是所有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 2

如果你想让一些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 3

您可以使用bootstrap.css中的类.accordion-toggle，第6082行更改文本的颜色。我不建议你编辑bootstrap文件。而不是那样，你可以在Bootstrap（bootstrap.css）之后包含你的css（my-own-style.css），这样你就可以通过重新定义它们来覆盖规则。

如果您使用的是SASS，则可以在导入引导程序之前更改变量。读这个： http://twitter.github.com/bootstrap/customize.html#variables

关于+/-按钮，您可以使用类似的东西来切换按钮类： http://pastebin.com/y4RxdEgH

你的按钮类将是icon-chevron-up和icon-chevron-down。