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

Question

我希望每次点击按钮时都可以切换按钮上的文本，例如从“显示更多...”到“显示更少...”。

我有一个按钮，用于展开或折叠附近的块（请参见Bootstrap文档中的Collapse部分，单击那里的示例“Link with href”按钮即可了解我的意思）。

这样一个Bootstrap按钮的HTML代码如下：

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

当相关块被折叠时，我希望按钮文本为“显示更多...”，当它被展开时，我希望它为“显示更少...”。

我看到一些解决方案将按钮文本分离到jQuery、Javascript或CSS中，但这使得HTML难以阅读（按钮文本完全与按钮不在一起），也使本地化变得更加困难。

- George Hawkins

Answer 1

使用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”的元素上安装处理程序 - 当单击时，此处理程序切换给定元素的子元素的可见性。

通过此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>...

- George Hawkins

Answer 2

在拼凑出这个方法之前，我试过几种不同的方法。但这是目前我看到的最简单、最易读的方法：

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

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

- David Hempy

---

很棒的解决方案，David！顺便提一下，你的锚点缺少一个闭合的“>”。 - Liz

谢谢，@Liz。错别字已经修正了。 :) - David Hempy

完美的答案，但我遇到了一个问题，即.collapsing转换时间太长，因此用户会在短暂的时间内看到两个选项。因此，我添加了这部分.collapsing，.show，.hide {transition: none !important; transition-delay: 0s; transition-delay: 0s !important;} 这样就不会再发生这种情况了。 - Daiaiai

Answer 3

与其处理过多的标签或直接将备用按钮文本放在JavaScript中，我个人更喜欢使用HTML5自定义数据属性。这样你就可以轻松地在每次单击时在原始和备用按钮文本之间切换，但保持相对于您的切换元素。

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>

- Mike Reid

Answer 4

您可以使用简单的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...');
    }
});

- Yameen

---

就像我说的那样，我认为将文本放在与其余HTML相关的同一位置中而不是完全分离到某个按钮特定的jQuery代码中是很好的。 - George Hawkins

Answer 5

感谢您的建议。您指导我朝着正确的方向前进，但最终我采用了稍微不同的方法。我的解决方案使用了一些CSS来确定“hidden”类的含义，然后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指出的那样，如果您使用的是Bootstrap，则不需要这段css。

jQuery：

jQuery(".toggle-link").click(function() {
    jQuery(this).find("span").toggleClass("hidden");
    /* Add more logic here */
});

我不是说这种方法更好，但对我来说它看起来更加清晰。此外，您可以通过不隐藏文本而是反复改变文本的颜色等方式来扩展此方法。

- Mark van Dijk

---

这个问题涉及到Bootstrap，在Bootstrap中.hidden已经被定义了 - 可以参考bootstrap/utilities.less的第45行，所以我不确定这个问题添加了什么。除非你没有使用Bootstrap？ - George Hawkins

谢谢，George。我已经相应地更新了我的答案。确实当时我没有使用Bootstrap。 - Mark van Dijk