在单击按钮时切换Bootstrap按钮文本？

Question

我想每次单击按钮时都在其上切换文本，例如，从“显示更多...”到“显示更少...”。

我有一个用于扩展或折叠附近街区的按钮（请参见Bootstrap文档的“ 折叠”部分，单击示例“使用href链接”以了解我的意思）。

此类Bootstrap按钮的HTML如下所示：

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
    See more...
</a>

当相关的块折叠时，我希望按钮文本为例如“显示更多...”，而当其展开时，我希望其文本为例如“显示更少...”。

我已经看到了将按钮文本分成jQuery，Javascript或CSS的解决方案-但这使读取HTML变得困难（按钮文本完全位于按钮的其他位置），并且也使得本地化更加困难。

Answer 1

在将这个方法拼凑在一起之前，我尝试了其中的几种方法。这是迄今为止我见过的最简单、最易读的方法：

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

除了它的简单性之外，我喜欢它非常可靠。因为标签永远不会被隐藏或操纵，所以在调试时你永远不会意外丢失查看/隐藏链接。

Answer 2

使用jQuery，答案很简单。只需使用一个名为class的新类标记这些按钮，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>需要添加任意数量的标签，也可以根据需要对其进行排序，重要的是标签是否带有class标记hidden。

现在，您可以在jQuery中执行以下操作：

$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
    $(this).find('span').each(function() { $(this).toggle(); });
});

第一行有点样板-jQuery和Bootstrap关于隐藏的想法有些矛盾。这只会将您使用Bootstrap类标记为隐藏的所有内容翻转为hiddenjQuery隐藏，从而使以后使用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>...