Twitter引导程序崩溃：更改切换button的显示
我正在使用Twitter Bootstrap创build可折叠的文本部分。 当按下+button时，部分被展开。 我的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>
有没有办法改变button来显示-而不是+扩大部分之后（当它再次折叠时变回+ ）？
附加信息 ：我希望能有一个简单的twitter-bootstrap / css / html解决scheme来解决我的问题。 到目前为止，所有的反应都使用JavaScript或PHP。 因此，我想添加一些关于我的开发环境的信息：我想在基于SilverStripe（3.0.5版）的网站中使用这个解决scheme，这对PHP和JavaScript都有一定的影响。
尝试这个。 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，伪元素
支持的浏览器
button.btn.collapsed:before { content:'+' ; display:block; width:15px; } button.btn:before { content:'-' ; display:block; width:15px; }
更新2使用纯Javascript
function handleClick() { this.value = (this.value == '+' ? '-' : '+'); } document.getElementById('collapsible').onclick=handleClick;
这是另一个CSS解决scheme，适用于任何HTML布局 。
它适用于您需要切换的任何元素。 无论您的切换布局是什么，只要把它放在一些元素中，在切换元素中使用if-collapsed和if-not-collapsed类。
唯一的问题是你必须确保把你想要的切换开始状态。 如果它最初是closures的，那么在开关上放置一个collapsed类。
它也需要:notselect器，所以它不能在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>
较less的版本：
[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小提琴
所有其他解决scheme张贴在这里导致切换不同步，如果它是双击。 以下解决scheme使用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中的一个错误。 我发现一个似乎工作的解决scheme：我向切换开关添加了一个“折叠”类（Bootstrap添加这个时，隐藏的元素，但他们并没有开始），然后添加到jQueryselect器隐藏function：
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') })
添加一些jQuery代码，你需要jQuery来做到这一点：
<script> $(".btn[data-toggle='collapse']").click(function() { if ($(this).text() == '+') { $(this).text('-'); } else { $(this).text('+'); } }); </script>
我想你可以看看你的下载代码里面有一个+符号（但这可能不是很容易）。
我会做什么？ 我会find包含+符号的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("-", "+")); });
这似乎是相反的事情，但是由于实际的animation是并行运行的，所以在animation之前你会检查css，这就是为什么你需要检查它是否可见（这将意味着它将在animation完成后隐藏）和然后设置相应的+或 – 。
我喜欢PSL的CSS解决scheme ，但在我的情况下，我需要在button中包含一些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; }
使用内联编码更容易
<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函数并修改这个。$ 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')
当所有内容都被展开时，这将在“折叠”和“展开”之间切换文本。
两行。 完成。
编辑：长期这不会工作。 bootstrap.js是一个Nuget包的一部分，所以我不认为这是我的更改到服务器。 如前所述，编辑bootstrap.js并不是最好的做法，所以我实现了PSL的解决scheme，效果很好。 尽pipe如此，如果您只需要快速尝试一下，我的解决scheme就可以在本地使用。
我以下的JS解决scheme比其他方法更好，因为它可以确保当目标被closures时它总是会说'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>
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>
