Chỉ hiển thị một phần của div

Question

Tôi muốn có một div chỉ hiển thị phần trên cùng của nó (như chiều cao 50px) và phần khác (dưới cùng 100px) của div sẽ được hiển thị bởi jquery.show() hoặc cái gì khác. Có ai biết làm thế nào để làm điều đó?

Answer 1

Bạn có thể thiết lập chiều cao div để 50px cố định và trên nhấp chuột, bạn có thể thay đổi chiều cao để tự động mỗi javascript/jQuery, hoặc trở lại nó từ tự động đến 50px.

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

Answer 2

Bạn có thể thiết lập chiều cao của div với chiều cao bạn muốn nó có từ khi bắt đầu (50px) thông qua CSS. Đặt overflow: hidden; để ẩn phần còn lại của nội dung.

Sau đó bạn có thể làm một cái gì đó như thế này để hiển thị toàn bộ phần tử:

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

Answer 3

Tôi muốn nhúng nội dung trong một <div id="foo" style="height: 50px; overflow:hidden">. Sau đó kiểm soát chiều cao của nguyên tố này với JQuery:

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

Answer 4

HTML:

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

CSS:

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

jQuery:

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