2012-04-16 159 views
8

我想要顯示div的頂部(如50px哦高度)和其他(底部像100px)div的部分應顯示爲jquery.show()或者是其他東西。有沒有人知道如何去做?只顯示div的某些部分

Here is an image to help explain

回答

7

你可以設置DIV的高度,以50像素固定和點擊,你可以每使用Javascript/jQuery的改變高度自動,或自動恢復它50像素。

CSS:

.mydiv{ 
    height:50px; 
    min-height:50px; 
    overflow:hidden; 
} 

的jQuery:

$("document").ready(function(){ 
    $(".mydiv").click(function(){ 
    if($(".mydiv").css("height")!="50px"){ 
     $(".mydiv").slideDown(); 
    } 
    else{ 
     $(".mydiv").slideUp(); 
    } 
    } 
} 
0

您可以設置div來,你想讓它從開始(像素),通過CSS具有高度的高度。設置overflow: hidden;以隱藏其餘內容。

在此之後,你可以做這樣的事情,以顯示整個元素:

$("#id-of-element-to-click-to-show-entire-div").click(function(){ 
    $(this).slideDown("fast"); 
}); 
1

我會嵌入到<div id="foo" style="height: 50px; overflow:hidden">內容。然後用jQuery控制該元素的高度:

$("#foo").css("height", whatever); 
+0

是的,它是工作的感謝。 – Mtok 2012-04-16 12:04:57

1

HTML:

<div id='example'>some content here</div> 

CSS:

#example {height: 50px; overflow:hidden;} 

的jQuery:

$('#example').click(function(){ 
    $(this).animate({ height: 500px; }, 250); 
} 
+0

它看起來不錯,但你確定語法是正確的,它是在JavaScript部分給出警告。 – Mtok 2012-04-16 12:01:43

+1

確定它沒有使用「;」像 $(this).animate({height:500px},250); – Mtok 2012-04-16 12:11:18