Question

我正在尝试像http://css-tricks.com/text-fade-read-more/ - 那样做但是如何在点击More按钮和正文时联系/展开它们？

点击正文可以正常使用，但只有第一次使用More按钮才能正常工作：

http://jsfiddle.net/frank_o/8ssrmxwp/10/

JS：

$.fn.truncate = function(container, maxHeight) {
  var totalHeight = 0,
    paragraph = container.find('p');

  container.css('max-height', maxHeight);

  paragraph.each(function() {
    totalHeight += $(this).outerHeight(true);
  });

  if(totalHeight > maxHeight) {
    container.append('<div class="fade_overlay"></div>');

    $('<a href="#" class="more">More</a>').insertAfter(container);

    var fadeOverlay = container.parent().find('.fade_overlay'),
      more = container.parent().find('.more'),
      duration = 100;

    // http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions

    function firstClick() {
      container.css('height', container.height())
        .css('max-height', 9999);

      container.animate({
        'height': totalHeight
      });

      fadeOverlay.fadeOut(duration);
      // more.fadeOut(duration);

      container.one('click', secondClick);
    }

    function secondClick() {
      container.animate({
        'height': maxHeight
      });

      fadeOverlay.fadeIn(duration);
      // more.fadeIn(duration);

      container.one('click', firstClick);
    }

    container.one('click', firstClick);
    more.one('click', firstClick);
  }    
}

$('.article').each(function () {
    $.fn.truncate($(this), 220);
});

我试图以不同方式布置功能，但无济于事：

http://jsfiddle.net/frank_o/8ssrmxwp/12/

JS：

var oddClick = function(target) {
  target.one('click', function() {
    var target = $(this);

    target.css('height', container.height())
      .css('max-height', 9999);

    target.animate({
      'height': totalHeight
    });

    fadeOverlay.fadeOut(duration);
    // more.fadeOut(duration);

    target.one('click', evenClick);
  });
}

var evenClick = function(target) {
  target.one('click', function() {
    var target = $(this);

    target.animate({
      'height': maxHeight
    });

    fadeOverlay.fadeIn(duration);
    // more.fadeIn(duration);

    target.one('click', oddClick);
  });
}

oddClick(container);
oddClick(more);

Answer 1

通过more.one('click', firstClick);在第一次调用后删除事件处理程序。将其更改为more.on('click', firstClick);即可。

单击按钮和正文时“阅读更多”

1 个答案: