Question

我已经编写了一个用于折叠内容的插件，当内容大于正在折叠的项目的所需高度时。当＆＃39;继续阅读＆＃39;单击它然后使用内容的原始高度展开。

我无法在屏幕调整大小时让它工作。当容器开始调整中性重组中的内容并变得更长时，会发生什么。这意味着当我点击“继续阅读”时它会扩展，但只会在页面首次加载时达到div的高度。

我怎么能这样做以便在页面调整大小时更新？

(function($){
  $.fn.toggleCollapse = function() {
    return this.each(function () {
      var $content = $(this);
      var $contentHeight = $content.height();
      var $collapseHeight = $(this).data('collapse-height');
      $content.height($collapseHeight);

      if (parseInt($collapseHeight) < $contentHeight) {
        $content.append('<div class="gradient"></div>');
        $content.append('<a href="#" class="collapse-toggle">Continue Reading</a>');

        $content.find('.collapse-toggle').click(function(){
          $content.toggleClass('expanded');
          if ($content.hasClass('expanded')) {
            $content.height($contentHeight);
            $(this).html("Collapse");
          } else {
            $content.height($collapseHeight);
            $(this).html("Continue Reading");
          }
        });
      }
    });
  };
})(jQuery);

我在我的代码中使用它来处理所有其他调整大小的动作：

var resizeTimeout;
window.onresize = function() {
  clearTimeout(resizeTimeout);
  // handle normal resize
  checkWidth();

  resizeTimeout = setTimeout(function() {
    // handle after finished resize
  }, 250);
};

function checkWidth () {
  var width = $(window).width();
  if (width > 1023) {

  }
  if (width < 1023) {

  }
}

Answer 1

我已经解决了这个问题。

而不是在JS中改变高度。在＆＃39;＃collapse-content＆＃39;上设置高度到height: auto然后将JS表单.height()更改为css.('max-height', $collapseHeight)这将设置动画，展开和折叠。 IE8中会出现一些最大高度的问题我很确定，但这是我现在需要的一个很好的解决方案。

如何在调整大小时进行此更新？

1 个答案: