切换文本 | CSS-Tricks

假设您有一个链接显示更多选项，它会展开一个选项列表。它显示“更多选项”。使用 .toggle() 或 .slideToggle() 很容易切换这些选项，但文本保持不变。要切换文本，您需要...

$("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

还有其他几种方法。

Pete

# 2011 年 6 月 19 日

'more otpions'

小错误。虽然很棒的代码片段。

Huw Rowlands

评论永久链接# 2014 年 9 月 4 日

小错误！‘snipped’

Mathias Bynens

# 2011 年 6 月 19 日

当然，将文本字符串放在 HTML 中会更有用，一个（默认文本）作为元素的文本内容，另一个作为 data-toggle-text 属性（或类似属性）的值。

在上面的示例中，您可能需要将 $("#extra-options") 和 $("#more-less-options-button") 缓存到变量中，以防止对相同元素反复查询 DOM。

moche

# 2011 年 6 月 20 日

很棒的提示
如果您使用像 ↑ 这样的 HTML 实体
请改为使用 $(“#more-less-options-button”).html(txt).text();

adardesign

# 2011 年 6 月 21 日

如果使用 html()（而不是 .text()）没有问题，那么您可以这样写。

$("#more-less-options-button").click(function() {
     $("#more-less-options-button").html(function(i,h){
      return ($("#extra-options").is(':visible') ? 'more options' : 'less options');
});
     $("#extra-options").slideToggle();
});

adardesign

# 2011 年 6 月 21 日

抱歉（这里无法编辑评论），我的意思是这样

$(“#more-less-options-button”).click(function() {
$(this).html(function(i,h){
return ($(“#extra-options”).is(‘:visible’) ? ‘更多选项’ : ‘更少选项’);
});
$(“#extra-options”).slideToggle();
});

Jbakes

# 2011 年 7 月 30 日

所以，如果我想将此应用于多个我想切换的内容，如何将它们分开？因此，如果我单击一个元素，其他元素不会随之改变

Clinton Green

# 2012 年 6 月 26 日

很棒，这正是我要找的，我已经有了点击函数，但一直难以添加一个切换函数到展开、收缩图标。感谢您。

Dibakar

# 2014 年 1 月 31 日

非常感谢。这就像芝士一样好用。非常流畅和完美。

Mike

# 2021 年 1 月 8 日

谢谢你，伙计！我是新手，花了几个小时才找到项目最佳解决方案。我在这里找到了。非常感谢您，也向 2021 年致敬：）

评论

发表回复 取消回复

发表回复取消回复