Question

这是我的标记：

  <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;
    });
});

你们能帮助我改进吗？：/

Answer 1

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

$('.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/

计算每篇文章的高度和大小

1 个答案: