Twitter bootstrap collapse：更改显示切换按钮 [英] Twitter bootstrap collapse: change display of toggle button

问题描述

我使用Twitter Bootstrap来创建可折叠的文本部分。当按下 + 按钮时，部分将展开。我的html代码如下：

 < div class =row-fluid summary> 
< div class =span11> 
< h2> MyHeading< / h2> 
< / div> 
< div class =span1> 
< button type =buttonclass =btn btn-successdata-toggle =collapsedata-target =＃intro> +< / button> 
< / div> 
< / div> 
< div class =row-fluid summary> 
< div id =introclass =collapse> 
这里是文本... 
< / div> 
< / div> 
  

是否有办法更改按钮显示 - 而不是 + 后，该部分展开（当它再次折叠变回 + ）？

其他信息：我希望有一个简单的twitter-bootstrap / css / html解决方案。到目前为止，所有的响应使用JavaScript或PHP。因此，我想添加一些关于我的开发环境的信息：我想在一个基于SilverStripe（版本3.0.5）的网站使用这个解决方案，这对于使用PHP和JavaScript有一些影响。 p>

解决方案

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

Html ： -

 < div class =row-fluid summary> 
< div class =span11> 
< h2> MyHeading< / h2> 
< / div> 
< div class =span1> 
< button class =btn btn-successdata-toggle =collapsedata-target =＃intro> +< / button> 
< / div> 
< / div> 
< div class =row-fluid summary> 
< div id =introclass =collapse> 
这里是文本... 
< / div> 
< / div> 
   
 
 
 
  JS： -   
 
 $ b b 
  $（'button'）click（function（）{//你可以为$（'button'）赋予id或类名
 $ ）.text（function（i，old）{
 return old =='+'？' - '：'+'; 
}）; 
}）; 
 
 更新使用纯Css，伪元素
 
 
 
  http://jsfiddle.net/r4Bdz/  
 
 
 
 支持的浏览器 
  button.btn.collapsed：before 
 {
 content：'+'; 
 display：block; 
 width：15px; 
} 
 button.btn：before 
 {
 content：' - '; 
 display：block; 
 width：15px; 
} 
  
 更新2  
 
 
  http://jsfiddle.net/WteTy/  
  function handleClick（）
 {
 this.value =（this.value =='+'？' - '：' ）; 
} 
 document.getElementById（'collapsible'）。onclick = handleClick; 
  
 
I am using Twitter Bootstrap to create collapsible sections of text. The sections are expanded when a + button  is pressed. My html code as follows:
<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>
Is there a way to change the button to display - instead of + after the section is expanded (and change back to + when it is collapsed again)?

Additional information: I hoped there would be a simple twitter-bootstrap/css/html-based solution to my problem. All responses so far make use of JavaScript or PHP. Because of this I want to add some more information about my development environment: I want to use this solution inside a SilverStripe-based (version 3.0.5) website which has some implications for the use of both PHP as well as JavaScript.
解决方案
try this. 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=='+' ?  '-' : '+';
    });
});
Update With pure Css, pseudo elements

http://jsfiddle.net/r4Bdz/

Supported Browsers
button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}
Update 2 With pure Javascript 

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


                        
这篇关于Twitter bootstrap collapse：更改显示切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！