jquery - jQuery Slide Toggle - 打开时更改 HTML

Question

当单击“阅读更多”链接时，我有这个功能可以打开一个 DIV 以显示内容。展开 DIV 后，我想将“阅读更多”的值更改为“关闭”。

<div class="container">
  <p class="expand-text">Read more</p>
  <div class="content">
    <div class="full-text">
      <p>Text content here</p>
    </div>                      
  </div>
</div>                            

<script>
 $(".container").click(function() {
   $(this).find('.content').slideToggle();
 });
</script>

Answer 1

$(".container").click(function() {
    $('.expand-text', this).text(function(i, v) {
        return v === 'Close' ? 'Read more' : 'Close'
    })
    $(this).find('.content').slideToggle();
});

http://jsfiddle.net/mBFzE/

Answer 2

   $(".expand-text").click(function() {
       $('.container .content').slideToggle('slow', function() {
             if ( $('.container .content').css("display") == 'none') {
           $(".container .expand-text").html('Read more');
        } else {
            $(".container .expand-text").html('Close');
        }

       });

      });  

Answer 3

尝试这个

$(".container").click(function () 
{
   $(this).find('.content').slideToggle('slow',
           function () { $(".expand-text").text("Close"); });
});

只需提供一个回调函数，当您的动画完成时将调用该函数。有关这方面的更多信息，请点击此处

Answer 4

您可以将回调函数传递给slideToggle()。它会在动画结束时被调用，然后你可以根据内容的可见性从那里更新你的元素：

$(".container").click(function() {
    $(this).find(".content").slideToggle(400, function() {
        var $this = $(this);
        $this.closest(".container").find(".expand-text").text(
            $this.is(":visible") ? "Close" : "Read more");
    });
});

Answer 5

这是一个 JS 摘录，可以做你想做的事情：

 $(".container").click(function() {
     var self = this;
     $(this).find('.content').slideToggle(function(){
         var newParagraphValue = undefined;
         var newParagraphValue = $(self).find('.full-text:visible').length > 0 ? "Close" : "Read more";                          
          $(self).find('.expand-text').html(newParagraphValue );    
          self = null;             
     });
 });​