HTML：

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;

Answer 2

这是另一个仅限CSS 解决方案，适用于任何HTML布局。

它适用于您需要切换的任何元素。无论您的切换布局是什么，只需将其放在切换元素内的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 Fiddle

Answer 3

此处发布的所有其他解决方案都会导致切换在双击时失去同步。以下解决方案使用events provided by the Bootstrap framework，并且切换始终与可折叠元素的状态匹配：

<强> 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')
})

Answer 4

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

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

Answer 5

我的以下JS解决方案比其他方法更好，因为它确保在目标关闭时它总是说“打开”，反之亦然。

HTML：

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS：

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});

示例：

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS Fiddle

这种方法的其他好处：

代码是DRY且可重复使用
每个折叠按钮保持独立
您只需在HTML中添加一项更改：添加data-toggle-secondary属性

Answer 6

我想您可以查看下载的代码，其中有一个+符号（但这可能不是很容易）。

我要做什么？我会找到包含+符号的DOM元素的类/ id（假设它是".collapsible"，并且使用Javascript（实际上是jQuery）：

<script>
     $(document).ready(function() {
         var content=$(".collapsible").html().replace("+", "-");
         $(".collapsible").html(content));
     });
</script>

修改好吧......对不起，我没有看过bootstrap代码...但我猜它适用于像slideToggle或slideDown and slideUp这样的东西...想象一下它是slideToggle类.collapsible的元素，它们显示了一些.info元素的内容。然后：

$(".collapsible").click(function() { var content=$(".collapsible").html(); if $(this).next().css("display") === "none") { $(".collapsible").html(content.replace("+", "-")); } else $(".collapsible").html(content.replace("-", "+")); });

这似乎是相反的事情，但由于实际的动画并行运行，你将在动画之前检查css，这就是你需要检查它是否可见的原因（这意味着它会在动画结束时被隐藏）完成）然后设置相应的+或 - 。

Answer 7

我喜欢CSS-only solution from PSL，但在我的情况下，我需要在按钮中包含一些HTML，内容CSS属性在这种情况下显示带有标记的原始HTML。

如果可以帮助其他人，我会用他的小提琴来掩盖我的用例：http://jsfiddle.net/brunoalla/99j11h40/2/

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
            <span class="show-ctrl">
                <i class="fa fa-chevron-down"></i> Expand
            </span>
            <span class="hide-ctrl">
                <i class="fa fa-chevron-up"></i> Collapse
            </span>            
        </button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

CSS：

button.btn .show-ctrl{
    display: none;
}
button.btn .hide-ctrl{
    display: block;
}
button.btn.collapsed .show-ctrl{
    display: block;
}
button.btn.collapsed .hide-ctrl{
    display: none;
}

Answer 8

使用内联编码更容易

<button type="button" ng-click="showmore = (showmore !=null && showmore) ? false : true;" class="btn float-right" data-toggle="collapse" data-target="#moreoptions">
            <span class="glyphicon" ng-class="showmore ? 'glyphicon-collapse-up': 'glyphicon-collapse-down'"></span>
            {{ showmore !=null && showmore ? "Hide More Options" : "Show More Options" }}
        </button>


<div id="moreoptions" class="collapse">Your Panel</div>

Answer 9

有些人可能会对更改Bootstrap js（可能是有效的）提出问题，但这是实现这一目标的两线方法。

在bootstrap.js中，查找Collapse.prototype.show函数并修改此。$ trigger调用以添加html更改，如下所示：

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)
  .html('Collapse')

同样在Collapse.prototype.hide函数中将其更改为

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)
  .html('Expand')

这将在＆＃34; Collapse＆＃34;之间切换文字。什么都扩展了＆＃34;展开＆＃34;当一切都崩溃了。

两行。完成。

编辑：长期以来，这不会奏效。 bootstrap.js是Nuget包的一部分，所以我不认为它是在宣传我对服务器的更改。如前所述，无论如何都不是编辑bootstrap.js的最佳实践，因此我实现了PSL的解决方案，该方案运行良好。尽管如此，如果你需要一些快速的东西来尝试它，我的解决方案将在本地工作。

Answer 10

您确实喜欢这样。该函数返回旧文本。

$('button').click(function(){ 
        $(this).text(function(i,old){
            return old=='Read More' ?  'Read Less' : 'Read More';
        });
    });

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

10 个答案:

示例：

这种方法的其他好处：

HTML：

CSS：