小开

最佳答案

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;
}

使用纯 Javascript 更新2

Http://jsfiddle.net/wtety/

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

小开

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

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

小开

我想你可以在下载的代码中找到确切的 +标志(但这可能并不容易)。

我会怎么做？我会找到包含 +符号的 DOM 元素的 class/id (假设它是 ".collapsible"，使用 Javascript (实际上是 jQuery) :

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

编辑好吧... ... 对不起，我还没有看到引导代码... ... 但是我想它可以用于类似于 slideToggle或者 slideDown and slideUp的东西... ... 想象一下，它是 .collapsible类元素的 slideToggle，它揭示了一些 .info元素的内容。然后:

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

这看起来似乎是相反的事情，但是因为实际的动画是并行运行的，你会在动画之前检查 css，这就是为什么你需要检查它是否可见(这意味着它将被隐藏一旦动画完成) ，然后设置相应的 + 或-。

小开

这里发布的所有其他解决方案都会导致双击时切换不同步。下面的解决方案使用 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>

约翰逊:

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

这对大多数情况都有效。

但是，在尝试将一个可折叠元素及其切换开关嵌入到另一个可折叠元素中时，我也遇到了一个额外的问题。使用上面的代码，当我单击嵌套切换以隐藏嵌套可折叠元素时，父元素的切换也会发生变化。可能是 Bootstrap 的一个漏洞。我找到了一个似乎行得通的解决方案: 我在切换开关中添加了一个“折叠”类(Bootstrap 在隐藏可折叠元素时添加了这个类，但是它们并没有以这个类开始) ，然后将它添加到 hide 函数的 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>

约翰逊:

$('#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')
})

小开

我喜欢来自 PSL 的只有 CSS 的解决方案，但是在我的例子中，我需要在按钮中包含一些 HTML，在这个例子中，content 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;
}

小开

这是另一个与 任何 HTML 布局一起工作的 只能用 CSS解决方案。

它适用于任何需要切换的元素。不管你的切换布局是什么，你只需要把它放在几个元素里面，在切换元素里面放上 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 小提琴

小开

使用内联编码更容易

<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>

小开

有些人可能会对更改 Bootstrap js (或许是有效的)提出异议，但这里有一个实现这一点的两行方法。

在 bootstrap.js 中，查找 Collapse.Prototype.show 函数并修改 this. $touch 调用以添加 html 更改，如下所示:

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

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

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

这将切换文本之间的“崩溃”时，一切都是展开和“展开”时，一切都是折叠。

两条线，搞定。

编辑: 从长远来看，这是行不通的。Js 是 Nuget 包的一部分，所以我不认为它会将我的更改传播给服务器。正如前面提到的，编辑 bootstrap.js 并不是最佳实践，所以我实现了 PSL 的解决方案，效果非常好。尽管如此，如果您需要一些快速的东西来尝试，我的解决方案将在本地工作。

小开

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

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>

约翰逊:

$('[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 小提琴

这种方法的其他好处:

代码是 DRY 和可重用的
每个折叠按钮保持独立
您只需要在 HTML 中做一个更改: 添加 data-toggle-secondary属性

小开

你喜欢这样。函数返回旧文本。

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

小开

在 Bootstrap 5.0.1中的应用和工作。使用简单的 jQuery

jQuery('button').on( 'click', function(){
if(jQuery(this).hasClass('collapsed')){
jQuery(this).html('+');
} else {
jQuery(this).html('-');
}
});

你也可以使用字体或 HTML 代替 +/-符号。

Bootstrap 折叠: 更改切换按钮的显示

HTML:

CSS:

例子:

这种方法的其他好处: