Question

我有一个元素，当点击它时向下滑动以显示其余内容，它会显示“显示更多信息”。

我需要的是在点击展开后更改该文字说“显示更少信息”，但在折叠时将其更改回“显示更多信息”

这是一个可以作为起点的小提琴：http://jsfiddle.net/QWB4J/1/

我尝试使用.replaceWith，但它只适用于展开而不是折叠。

任何帮助都非常感谢。

修改 -

以下是解决方案的小提琴：http://jsfiddle.net/QWB4J/24/

由 willw 提供的解决方案。

Answer 1

您可以在toggleClass调用后添加类似的内容：

  $(".desc").html($(".desc").hasClass("collapse") ? "Less" : "More");

希望有所帮助

Answer 2

你可以像这样实现它

$(this).prev("div.more-content").slideToggle(500, function() {
    var s = $(".desc").toggleClass("collapse").hasClass("collapse");
        if(s){
            $(".more-title span").html("Show Less Information");
        }else{
            $(".more-title span").html("Show More Information");
        }
});

在此处查看演示：http://jsfiddle.net/diode/QWB4J/10/

根据操作切换替换文本

2 个答案: