javascript - 同时单击按钮和正文文本时出现 "read more"

Question

我正在尝试这样做 http://css-tricks.com/text-fade-read-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); 即可运行。