我想在每次单击按钮时切换按钮上的文本，例如从“显示更多...”到“显示更少...”。
我有一个用于展开或折叠附近块的按钮（请参阅 Bootstrap 文档的 Collapse 部分，单击此处的示例“带 href 链接”按钮以了解我的意思）。
此类引导按钮的 HTML 如下所示：
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
See more...
</a>
当相关块被折叠时，我希望按钮文本是例如“显示更多......”当它被扩展时，我希望它是例如“少显示……”。
我已经看到将按钮文本分离为 jQuery、Javascript 或 CSS 的解决方案 - 但这使得 HTML 难以阅读（按钮文本完全位于按钮的其他位置）和也使本地化变得更加困难。
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
使用 jQuery，答案很简单。只需使用名为toggle-text 的新类标记此类按钮，然后使用<span> 和<span class="hidden"> 标记要在其间来回切换的文本：
<a class="btn btn-primary toggle-text" data-toggle="collapse" href="#collapseExample">
See <span>more</span><span class="hidden">less</span>...
</a>
您可以拥有任意数量的<span> 标签，并且可以随意订购它们，重要的是它们是否标有hidden 类。
现在在 jQuery 中你可以这样做：
$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
$(this).find('span').each(function() { $(this).toggle(); });
});
第一行有点像样板——jQuery 和 Bootstrap 关于隐藏的想法有些冲突。这只是将您使用 Bootstrap 类 hidden 标记为隐藏的所有内容翻转为被 jQuery 隐藏，从而更容易使用
之后 jQuery 可见性函数。
下一点是重要的东西 - 它在所有标记有我们的新类 toggle-text 的元素上安装一个处理程序 - 这个处理程序在单击时切换给定元素的 <span> 子元素的可见性。
使用这个 jFiddle 查看所有操作 - http://jsfiddle.net/w3y421m9/1/
注意：toggle-text 的名称完全是任意的，仅用于标记我们想要此切换行为的按钮。
这是我第一次写一个想要回答的问题。我有兴趣看看是否有人有更好的答案。
对我来说，这个解决方案看起来超级简单，并且具有将按钮文本与按钮的 HTML 保持在一起的一大优点，无需额外的按钮特定 CSS 或 Javascript/jQuery 代码。
jQuery 很好，因为它不必根据您要显示的文本在每个按钮的基础上进行自定义。而且您可以灵活地混合您想要切换和不想切换的文本，例如以下都是等价的：
<span>Show more...</span><span class=hidden">Show less...</span>
Show <span>more</span><span class=hidden">less</span>...
Show <span class=hidden">less</span><span>more</span>...
【讨论】：
您可以使用简单的 jQuery 来实现这一点。
https://jsfiddle.net/YameenYasin/5j0ehez1/40/
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
See more...
</a>
$('a').click(function(){
if($(this).text().trim() == 'See more...' ){
$(this).text('See Less...');
}else{
$(this).text('See more...');
}
});
【讨论】：
感谢您的建议。您为我指明了正确的方向，但最终我的做法略有不同。我的解决方案使用一些 CSS 来说明“隐藏”类的含义，然后 jQuery 在所有 SPAN 元素上切换该类：
HTML（与您的类似）：
<a class="toggle-link" href="...">
<span>Show more...</span>
<span class="hidden">Show less...</span>
</a>
CSS：
.toggle-link .hidden {
display: none;
}
更新：正如 George Hawkins 所指出的，如果您使用引导程序，则不需要这些 css
jQuery：
jQuery(".toggle-link").click(function() {
jQuery(this).find("span").toggleClass("hidden");
/* Add more logic here */
});
我并不是说它本身更好，但对我来说它看起来更干净一些。此外，您可以通过不隐藏文本而是来回更改其颜色等来扩展此方法。
【讨论】：
.hidden 已经定义 - 请参阅 line 45 of bootstrap/utilities.less 所以我不确定这增加了什么。除非你不使用 Bootstrap？
我个人更喜欢利用 HTML5 custom data attributes，而不是直接处理多余的标签或将备用按钮文本放在你的 JavaScript 中。这样，您可以在每次点击时轻松地在 original 和 alternate 按钮文本之间旋转，但要保持它与您的切换元素相关。
jQuery(function($){
$('.btn[data-toggle="collapse"]').on('click', function(){
$(this)
.data('text-original', $(this).text())
.text($(this).data('text-alt') )
.data('text-alt', $(this).data('text-original'));
});
});<!--styles-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--toggle 1-->
<button class="btn btn-link" data-toggle="collapse" data-target=".details-1" data-text-alt="- hide details">+ show details</button>
<div class="details-1 collapse">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<hr>
<!--toggle 2-->
<button class="btn btn-link" data-toggle="collapse" data-target=".details-2" data-text-alt="- hide details">+ show details</button>
<div class="details-2 collapse">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>【讨论】：
在将这些方法拼凑在一起之前，我尝试了其中的几种方法。这是迄今为止我见过的最简单、最易读的方法：
<a href="#" data-toggle='collapse'
data-target="#filters,#view_filters,#hide_filters">
<span id='view_filters' class='collapse in'>View Filters</span>
<span id='hide_filters' class='collapse out'>Hide Filters</span>
</a>
<div id="filters" class="collapse out">
Now you see me!
</div>
此链接的主要目的是切换 div#filters 的可见性...但它利用 data_target 中的多个选择器来切换两个版本的链接文本的可见性。只要确保你有一个文本为“.collapse .in”，另一个文本为“.collapse .out”。
除了简单之外，我喜欢它非常可靠。因为标签永远不会隐藏或操纵，所以在调试时您永远不会意外丢失查看/隐藏链接。
【讨论】：