jquery - 改变 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 为你创建所有这些，

检查演示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 中的第 6082 行的 .accordion-toggle 类更改文本的颜色。我不建议您编辑引导文件。取而代之的是，您可以在 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。