計數高度並調整爲每篇文章

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功能，它可以很容易地加入到一個點擊事件監聽器：

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