jQuery slideDown với chiều cao thiết lập và tràn

Question

Tôi có đoạn code HTML sau

<div class="text">bla bla bla bla</div> 
<div class="button">Show</div> 

Và CSS

.text{ 
    height:100px; 
    overflow:hidden; 
} 

Giả .textdiv có văn bản cách hơn và những gì tôi làm là ẩn số lượng văn bản dưới 100px.

Làm cách nào để có thể slideDown() số div để tôi có thể xem văn bản khi tôi nhấp vào nút?

Sử dụng $(".button").slideDown(); không hoạt động vì tôi cần phải loại bỏ chiều cao và sau đó slideDown() nhưng điều này sẽ không hoạt động.

Answer 1

Hãy thử điều này nó rất đơn giản và dễ dàng mà không tạo bất kỳ bản sao nào.

$(function(){ 
    $(".button").click(function(){ 
     var $text = $(".text"); 
     var contentHeight = $text 
          .addClass('heightAuto').height(); 
     $text.removeClass('heightAuto').animate({ 
      height: (contentHeight == $text.height() ? 100 : contentHeight) 
     }, 500); 

    }); 
}); 

Added một lớp mới

.heightAuto{ 
    height:auto; 
} 

Demo

Answer 2

Tôi hoàn toàn hiểu sai câu hỏi của bạn.

Thật không may, bạn thực sự không thể đặt thành chiều cao tự động. Nhưng bạn có thể animate đến một chiều cao được thiết lập, sử dụng .animate();

.animate({height:'200px'};

slideUp()' và .slideDown(); thiết lập các divs để display: none và display: block Vì vậy, bạn nói đúng, điều đó sẽ không làm việc cho những gì bạn đang cố gắng làm.

EDIT

Tôi chỉ thấy bài Kato của. Đó có lẽ là lựa chọn tốt nhất cho bạn.

Answer 3

Tùy chọn sạch sẽ nhưng tốn kém: Sử dụng trực tiếp animate thay vì slideDown(). Xác định chiều cao bạn muốn tạo hiệu ứng bằng cách tạo bản sao và đặt chiều cao thành tự động.

$('.button').click(function() { 
    var $div = $('div.text'); 
    $div.animate({height: determineActualHeight($div)}); 
}); 

// if you can determine the div's height without this, it would be faster 
// what makes this expensive is inserting and removing an element from the dom 
// of course, you aren't doing this a thousand times a second, so it's probably no biggie 
function determineActualHeight($div) { 
    var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()), 
     height = $clone.height(); 
    $clone.remove(); 
    return height; 
} 

Một chút xấu xí nhưng ít tốn kém tùy chọn: chỉ cần thiết lập chiều cao để tự động, ẩn yếu tố, sau đó sử dụng slideDown() để làm cho nó:

$('.button').click(function() { 
    $('div.text').hide().css('height', 'auto').slideDown(); 
} 

Answer 4

Tôi thích giải pháp Shankar nhưng các chức năng bị phá vỡ sau khi hai lần nhấp chuột đầu tiên .. Điều này là do lớp tự động được ghi đè bởi kiểu chiều cao nội tuyến. Vì vậy, thay vào đó tôi chỉ thay đổi thuộc tính chiều cao.

Dưới đây là đường đi của tôi lúc đó:

$(".button").click(function(){ 
    $box = $(".text"); 
    minimumHeight = 100; 

    // get current height 
    currentHeight = $box.height(); 

    // get height with auto applied 
    autoHeight = $box.css('height', 'auto').height(); 

    // reset height and revert to original if current and auto are equal 
    $box.css('height', currentHeight).animate({ 
     height: (currentHeight == autoHeight ? minimumHeight : autoHeight) 
    }) 
}); 

Một lỗ hổng ở đây là nếu bạn thêm đệm vào hộp bạn nhận được một số nhảy xấu xí. Mở để slutions trên đó.

Here's a demo

Cải tiến và đề nghị được rất đáng hoan nghênh

Answer 5

sử dụng scrollHeight tài sản, điều này có thể làm cho kịch bản của bạn năng động.

$('.button').click(function() { 
    $('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000); 
});