javascript - jQuery - 阅读更多/阅读更少。如何替换文字？

Question

HTML:

<a href="#" class="show_hide" data-content="toggle-text">Read More</a>

jQuery:

// Slide Up Slide Down
$('.show_hide').toggle(function(){
$(this).text().replace("Read More", "Read Less");
$('.' + $(this).attr('data-content')).slideDown();

},function(){
$(this).text().replace("Read Less", "Read More");
$('.' + $(this).attr('data-content')).slideUp();
});

我正在尝试制作其中一个“阅读更多/阅读更少”按钮来隐藏和显示文本。
如何在点击时将“阅读更多”替换为“阅读更少”？

非常感谢您的意见!

Answer 1

您还可以使用 :visible 检查内容是否可见并相应地更改文本。

$(document).ready(function () {
    $(".content").hide();
    $(".show_hide").on("click", function () {
        var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
        $(".show_hide").text(txt);
        $(this).next('.content').slideToggle(200);
    });
});

<强> JSFiddle Demo