Jquery切换显示和隐藏文本更改

Question

我一直在寻找一段时间,我找不到答案或让我按照自己的意愿工作.

现在我有一些隐藏的内容,然后在点击"阅读更多"时向下扩展但是当它被点击时,我希望将该文本更改为"Less"或"Hide"或其他内容.

这是我的代码.

$(document).ready(function () {
    $('.moreinfo').hide();
    $('.more').click(function () {
        $('#info'+$(this).attr('target')).toggle(500);
        return false;
    });  
});

那就是这个html

<p class="moreinfo" id="info1">CONTENT HERE</p>
<a class="more" target="1">Read More</a>

任何帮助是极大的赞赏!谢谢.

Answer 1

你可以在这里使用回调jsfiddle

        $('.moreinfo').hide();
        $('.more').click(function (ev) {
           var t = ev.target
           $('#info' + $(this).attr('target')).toggle(500, function(){
              $(t).html($(this).is(':visible')? 'I\'m done reading more' : 'Read more')
           });
           return false;
        });

您可以在此处阅读有关jQuery.toggle()的更多信息