Html Twitter bootstrap 崩溃：更改切换按钮的显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16224636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap collapse: change display of toggle button
提问by Markus M.
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:
我正在使用 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>
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.
附加信息：我希望有一个简单的基于 twitter-bootstrap/css/html 的解决方案来解决我的问题。到目前为止，所有响应都使用 JavaScript 或 PHP。因此，我想添加一些有关我的开发环境的更多信息：我想在基于 SilverStripe（版本 3.0.5）的网站中使用此解决方案，该网站对 PHP 和 JavaScript 的使用都有一些影响。
回答by PSL
try this. http://jsfiddle.net/fVpkm/
尝试这个。http://jsfiddle.net/fVpkm/
Html:-
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:-
JS：-
$('button').click(function(){ //you can give id or class name here for $('button')
$(this).text(function(i,old){
return old=='+' ? '-' : '+';
});
});
UpdateWith pure Css, pseudo elements
使用纯 CSS、伪元素更新
button.btn.collapsed:before
{
content:'+' ;
display:block;
width:15px;
}
button.btn:before
{
content:'-' ;
display:block;
width:15px;
}
Update 2With pure Javascript
更新 2使用纯 Javascript
function handleClick()
{
this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;
回答by Jens
Here's another CSS onlysolution that works with any HTML layout.
这是另一种适用于任何 HTML 布局的纯 CSS解决方案。
It works with any element you need to switch. Whatever your toggle layout is you just put it inside a couple of elements with the if-collapsedand if-not-collapsedclasses inside the toggle element.
它适用于您需要切换的任何元素。无论您的切换布局是什么，您只需将它放在几个元素中，if-collapsed并if-not-collapsed在切换元素内使用和类。
The only catch is that you have to make sure you put the desired initial state of the toggle. If it's initially closed, then put a collapsedclass on the toggle.
唯一的问题是您必须确保设置所需的切换初始状态。如果它最初是关闭的，则collapsed在开关上放置一个类。
It also requires the :notselector, so it doesn't work on IE8.
它还需要:not选择器，因此它不适用于 IE8。
HTML example:
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>
Less version:
少版本：
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
CSS version:
CSS 版本：
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
回答by AzDesign
Add some jquery code, you need jquery to do this :
添加一些 jquery 代码，你需要 jquery 来做到这一点：
<script>
$(".btn[data-toggle='collapse']").click(function() {
if ($(this).text() == '+') {
$(this).text('-');
} else {
$(this).text('+');
}
});
</script>
回答by linesarefuzzy
All the other solutions posted here cause the toggle to get out of sync if it is double clicked. The following solution uses the events provided by the Bootstrap framework, and the toggle always matches the state of the collapsible element:
如果双击，此处发布的所有其他解决方案都会导致切换不同步。以下解决方案使用Bootstrap 框架提供的事件，并且切换始终匹配可折叠元素的状态：
HTML:
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:
JS：
$('#intro').on('show', function() {
$('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
$('#intro-switch').html('+')
})
That should work for most cases.
这应该适用于大多数情况。
However, I also ran into an additional problem when trying to nest one collapsible element and its toggle switch inside another collapsible element. With the above code, when I click the nested toggle to hide the nested collapsible element, the toggle for the parent element also changes. It may be a bug in Bootstrap. I found a solution that seems to work: I added a "collapsed" class to the toggle switches (Bootstrap adds this when the collapsible element is hidden but they don't start out with it), then added that to the jQuery selector for the hide function:
但是，在尝试将一个可折叠元素及其切换开关嵌套在另一个可折叠元素中时，我还遇到了另一个问题。使用上面的代码，当我单击嵌套切换以隐藏嵌套的可折叠元素时，父元素的切换也会发生变化。这可能是 Bootstrap 中的一个错误。我找到了一个似乎有效的解决方案：我在切换开关中添加了一个“折叠”类（当可折叠元素隐藏但它们不以它开始时，引导程序添加了这个），然后将它添加到 jQuery 选择器中隐藏功能：
HTML:
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:
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')
})
回答by Harvey
My following JS solution is better than the other approaches here because it ensures that it will always say 'open' when the target is closed, and vice versa.
我下面的 JS 解决方案比这里的其他方法更好，因为它确保在目标关闭时它总是说“打开”，反之亦然。
HTML:
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:
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);
}
});
});
Examples:
例子：
$('[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>Other benefits of this approach:
这种方法的其他好处：
- the code is DRY and reusable
- each collapse button stays separate
- you only need to put one change into the HTML: adding the
data-toggle-secondaryattribute
- 代码是 DRY 和可重用的
- 每个折叠按钮保持独立
- 您只需要在 HTML 中进行一项更改：添加
data-toggle-secondary属性
回答by Nico
I guess you could look inside your downloaded code where exactly there is a +sign (but this might not be very easy).
我想您可以查看下载的代码，其中究竟有一个+标志（但这可能不是很容易）。
What I'd do?
I'd find the class/id of the DOM elements that contain the +sign (suppose it's ".collapsible", and with Javascript (actually jQuery):
我会怎么做？我会找到包含+符号的 DOM 元素的类/id （假设它是".collapsible", 并且使用 Javascript（实际上是 jQuery）：
<script>
$(document).ready(function() {
var content=$(".collapsible").html().replace("+", "-");
$(".collapsible").html(content));
});
</script>
editAlright... Sorry I haven't looked at the bootstrap code... but I guess it works with something like slideToggle, or slideDown and slideUp... Imagine it's a slideTogglefor the elements of class .collapsible, which reveal contents of some .infoelements. Then:
编辑好吧...对不起，我没有看过引导程序代码...但我想它可以与类似的东西一起使用slideToggle，或者slideDown and slideUp...想象一下它slideToggle是 class 元素的 a .collapsible，它显示了一些.info元素的内容。然后：
$(".collapsible").click(function() {
var content=$(".collapsible").html();
if $(this).next().css("display") === "none") {
$(".collapsible").html(content.replace("+", "-"));
}
else $(".collapsible").html(content.replace("-", "+"));
});
This seems like the opposite thing to do, but since the actual animation runs in parallel, you will check css before animation, and that's why you need to check if it's visible (which will mean it will be hidden once the animation is complete) and then set the corresponding + or -.
这似乎是相反的事情，但由于实际动画并行运行，您将在动画之前检查 css，这就是为什么您需要检查它是否可见（这意味着一旦动画完成它就会被隐藏）和然后设置相应的+或-。
回答by Bruno A.
I liked the CSS-only solution from PSL, but in my case I needed to include some HTML in the button, and the content CSS property is showing the raw HTML with tags in this case.
我喜欢PSL 的纯 CSS 解决方案，但就我而言，我需要在按钮中包含一些 HTML，在这种情况下，内容 CSS 属性显示带有标签的原始 HTML。
In case that could help someone else, I've forked his fiddle to cover my use case: http://jsfiddle.net/brunoalla/99j11h40/2/
如果可以帮助其他人，我已经分叉了他的小提琴来涵盖我的用例：http: //jsfiddle.net/brunoalla/99j11h40/2/
HTML:
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:
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;
}
回答by Mahdi
You do like this. the function return the old text.
你喜欢这样。该函数返回旧文本。
$('button').click(function(){
$(this).text(function(i,old){
return old=='Read More' ? 'Read Less' : 'Read More';
});
});
回答by Swapna Jerin
Easier with inline coding
内联编码更容易
<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>
回答by scottndecker
Some may take issue with changing the Bootstrap js (and perhaps validly so) but here is a two line approach to achieving this.
有些人可能会对更改 Bootstrap js 提出问题（也许确实如此），但这里有一种两行方法来实现这一点。
In bootstrap.js, look for the Collapse.prototype.show function and modify the this.$trigger call to add the html change as follows:
在 bootstrap.js 中，查找 Collapse.prototype.show 函数并修改 this.$trigger 调用以添加 html 更改，如下所示：
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
.html('Collapse')
Likewise in the Collapse.prototype.hide function change it to
同样在 Collapse.prototype.hide 函数中将其更改为
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
.html('Expand')
This will toggle the text between "Collapse" when everything is expanded and "Expand" when everything is collapsed.
这将在所有内容展开时的“折叠”和所有内容折叠时的“展开”之间切换文本。
Two lines. Done.
两条线。完毕。
EDIT: longterm this won't work. bootstrap.js is part of a Nuget package so I don't think it was propogating my change to the server. As mentioned previously, not best practice anyway to edit bootstrap.js, so I implemented PSL's solution which worked great. Nonetheless, my solution will work locally if you need something quick just to try it out.
编辑：长期这行不通。bootstrap.js 是 Nuget 包的一部分，所以我认为它不会将我的更改传播到服务器。如前所述，无论如何都不是编辑 bootstrap.js 的最佳实践，所以我实现了 PSL 的解决方案，效果很好。尽管如此，如果您需要快速尝试一下，我的解决方案将在本地工作。
