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

Question

我一直在寻找一段时间，但我找不到答案或让它按我的意愿工作。

现在我有一些隐藏的内容，然后在单击“阅读更多”时向下展开但是当它被单击时，我希望将该文本更改为“更少”或“隐藏”或其他内容。

这是我的代码。

$(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() 的更多信息

Answer 2

$(document).ready(function(){
  $("#div1").click(function(){
    $(this).text($(this).text() == 'More' ? 'Less' : 'More'); 
    $("#div2").slideToggle("slow");

  });
});

Answer 3

function slidtogl_contnt(id1){
    $("#"+id1).slideToggle();
    var txt = $("#more_txt").text();
    if(txt == 'More....'){
      $("#more_txt").text('Less....');
    }
    else{
      $("#more_txt").text('More....');
    }
  }