计算每篇文章的高度和调整大小答案

【问题标题】：count height and resize for each article计算每篇文章的高度和调整大小
【发布时间】：2014-02-06 06:07:28
【问题描述】：

这是我的标记：

  <div class="content">
    <div class="content_expander">
    {newsrow.MESSAGE}
    </div>
    <a href="#" class="expand">Rozwiń</a>
  </div>

我用来列出我在论坛上的帖子。

.content div默认高度为500px，.content_expander为文章高度（有时高于父div）。

我想要实现的是能够展开和折叠.content div 以显示/隐藏整个帖子。

所以我已经尝试过：

$(document).ready(function(){

  $("article .content").each(function() {
    var boxHeight = 500;
    var insideHeight = $(this).find(".content_expander").height();
    //alert(insideHeight);
    if(boxHeight<insideHeight) {
        $(this).children(".expand").css({
        opacity: 0,
        display: 'inline-block'     
    }).animate({opacity:1},600);
    }

  });
    $('.expand').click(function(){
        var elementToChange = $(this).parent().find(".content_expander");
        newHeight = elementToChange.height();

        elementToChange.parent().animate({ 
        height: newHeight + 'px',
      }, 500 );
        $(this).addClass('collapse');
        $(this).removeClass('expand');
        $(this).html('Collapse');
        return false;
    });
    $('.collapse').click(function(){
        var elementToChange = $(this).parent().find(".content_expander");
        newHeight = elementToChange.height();

        elementToChange.parent().animate({ 
        height: '500px',
      }, 500 );
        $(this).addClass('expand');
        $(this).removeClass('collapse');
        $(this).html('Expand');
        return false;
    });
});

你们能帮我改进一下吗？：/

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我认为您正在寻找的是 jQuery .slideDown 和 .slideUp 函数，它们可以很容易地添加到单击事件侦听器中：

$('.expand').on('click', function() {
   var parent = $(this).parent().find(".content_expander");
   var parentVisibility = parent.css('display');
   if ( parentVisibility == 'none' ) {
      parent.slideDown(500); 
      $(this).text('Collapse');
   }
   else {
      parent.slideUp(500);      
      $(this).text('Expand');
   }
});

我认为这就是您要寻找的东西（如果不是，请通知我）。这是一个小提琴：http://jsfiddle.net/MarkvA/9jTUM/1/

【讨论】：

是的，我知道这种方式，但我想让“500px 部分”一直可见，如果有更多内容，请向上/向下切换。