Twitter引导程序崩溃:更改切换按钮的显示

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/

支持的浏览器

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;

Answer 2

这是另一个仅适用于任何HTML布局的CSS解决方案.

它适用于您需要切换的任何元素.无论您的切换布局是什么,您只需将其与toggle元素内的if-collapsed和几个元素if-not-collapsed放在一起.

唯一的问题是你必须确保你把所需的初始状态设置为切换.如果它最初关闭,那么collapsed在切换上放一个类.

它还需要:not选择器,因此它不适用于IE8.

HTML示例:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

更少版本:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

CSS版本:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

JS小提琴

Answer 3

添加一些 jquery 代码，你需要 jquery 来做到这一点：

<script>
        $(".btn[data-toggle='collapse']").click(function() {
            if ($(this).text() == '+') {
                $(this).text('-');
            } else {
                $(this).text('+');
            }
        });
        </script>

Answer 4

此处发布的所有其他解决方案会导致切换在双击时不同步.以下解决方案使用Bootstrap框架提供的事件,并且切换始终与可折叠元素的状态匹配:

HTML:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" 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:

$('#intro').on('show', function() {
  $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
  $('#intro-switch').html('+')
})

这应该适用于大多数情况.

但是,当尝试将一个可折叠元素及其切换开关嵌套在另一个可折叠元素中时,我还遇到了另一个问题.使用上面的代码,当我单击嵌套的切换以隐藏嵌套的可折叠元素时,父元素的切换也会更改.它可能是Bootstrap中的一个错误.我发现了一个似乎有效的解决方案:我在切换开关中添加了一个"折叠"类(Bootstrap在隐藏可折叠元素时添加了这个,但它们不是从它开始的),然后将它添加到jQuery选择器中隐藏功能:

http://jsfiddle.net/fVpkm/87/

HTML:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...<br>
        <a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
        <div id="details" class="collapse">
            More details...
        </div>
    </div>
</div>

JS:

$('#intro').on('show', function() {
    $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
    $('#intro-switch.collapsed').html('+')
})

$('#details').on('show', function() {
    $('#details-switch').html('Hide details')
})
$('#details').on('hide', function() {
    $('#details-switch.collapsed').html('Show details')
})