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(), here

的更多信息

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....');
    }
  }

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

3 个答案: