Question

我想在每次点击按钮时切换按钮上的文字，例如来自＆＃34;显示更多...＆＃34; to＆＃34;显示更少......＆＃34;。

我有一个用于展开或折叠附近区块的按钮（请参阅Bootstrap文档的Collapse部分，点击示例＆＃34;链接href＆＃34;按钮到那里看看我的意思。）

这种Bootstrap按钮的HTML如下所示：

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

当折叠相关块时，我希望按钮文本为例如＆＃34;显示更多...＆＃34;当它被扩展时，我希望它是例如＆＃34;显示更少......＆＃34;。

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

Answer 1

使用jQuery答案很简单。只需使用名为toggle-text的新类标记此类按钮，然后使用和标记要在之间切换的文本：

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

您可以根据需要添加任意数量的个hidden代码，并可以根据需要对其进行排序，重要的是它们是否标有类$('.hidden').removeClass('hidden').hide(); $('.toggle-text').click(function() { $(this).find('span').each(function() { $(this).toggle(); }); });。

现在在jQuery中你可以做到：

hidden

第一行是一个锅炉板 - jQuery和Bootstrap有一些关于隐藏的相互矛盾的想法。这只是使用Bootstrap类toggle-text将您标记为隐藏的所有内容翻转为jQuery隐藏，这样可以更轻松地使用之后是jQuery可见性函数。

下一步是重要的事情 - 它在所有标有我们的新类的元素上安装一个处理程序 - 这个处理程序在单击时切换给定元素的toggle-text子元素的可见性。

使用此jFiddle查看所有操作 - http://jsfiddle.net/w3y421m9/1/

注意：名称Show more...Show less... Show moreless... Show lessmore...完全是任意的，仅用于标记我们希望此切换行为的按钮。

这是我第一次写一个问题，意图回答它。我很想知道某人是否有更好的答案。

对我来说，这个解决方案看起来非常简单，并且将按钮文本与按钮的HTML保持在一起，没有额外的按钮特定CSS或Javascript / jQuery代码。

jQuery很不错，因为它不需要按每个按钮进行自定义，具体取决于您要显示的文本。而且你可以灵活地混合使用和不想切换的文本，例如：以下都是等价的：

{{1}}

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

您可以使用简单的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 4

我个人更喜欢利用HTML5 custom data attributes，而不是处理多余的标签或将您的备用按钮文本直接放在 JavaScript中。这样，您可以在每次点击时轻松地在原始和备用按钮文本之间进行旋转，但请将其与切换元素保持相对。

＆＃13;

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

＆＃13;

<head>
...
    <!-- General Style -->
<link href='css/style.css' id='styles-css' media='all' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">


<!-- Scripts -->
<script src='js/jquery-2.1.1.min.js'></script>
<script src='js/jquery-migrate-1.2.1.min.js'></script>
<script src='js/bootstrap.min.js' type='text/javascript'></script>
<script src='js/jquery.mobile-1.4.5.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
...
 </head>

＆＃13;

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 */
});

我不是说它本身更好，但对我来说它看起来更清洁一点。此外，您可以通过不隐藏文本但来回更改它的颜色等扩展此方法，等等。

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

5 个答案: