单击按钮时切换 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 变得困难（按钮文本完全位于按钮的其他位置），并且也使得本地化变得更加困难.

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

的元素上安装一个处理程序 - 当单击给定元素时，该处理程序会切换给定元素的

<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>...

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

除了简单之外，我还喜欢它非常可靠。由于标记永远不会被隐藏或操纵，因此您在调试时永远不会意外丢失查看/隐藏链接。

Answer 3

我个人更喜欢利用 HTML5 自定义数据属性，而不是处理多余的标签或直接在 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>

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...');
    }
});

Answer 5

感谢您的建议。你为我指明了正确的方向，但我最终的做法略有不同。我的解决方案使用一些 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;
}

更新：如果您使用 bootstrap，则不需要这一点 css，正如 George Hawkins 指出的

jQuery：

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

我并不是说它本身更好，但对我来说它看起来更干净一些。此外，您可以通过不隐藏文本而是来回更改其颜色等来扩展此方法。

Answer 6

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>