javascript - Twitter Bootstrap 崩溃 : change display of toggle button

Question

我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下 + 按钮时，这些部分会展开。我的html代码如下:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

有没有办法在该部分展开后将按钮更改为显示 - 而不是 + (并在展开时更改回 +它再次折叠)？

其他信息:我希望有一个简单的基于 twitter-bootstrap/css/html 的解决方案来解决我的问题。到目前为止，所有回复都使用 JavaScript 或 PHP。因此，我想添加一些关于我的开发环境的更多信息:我想在基于 SilverStripe(版本 3.0.5)的网站中使用这个解决方案，这对 PHP 和 JavaScript 的使用有一些影响。

Answer 1

试试这个。 http://jsfiddle.net/fVpkm/

HTML:-

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS:-

$('button').click(function(){ //you can give id or class name here for $('button')
    $(this).text(function(i,old){
        return old=='+' ?  '-' : '+';
    });
});

更新 纯CSS，伪元素

http://jsfiddle.net/r4Bdz/

Supported Browsers

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

更新 2 使用纯 Javascript

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;