Thêm mở rộng/thu gọn CSS3

Question

Làm cách nào để thêm chuyển đổi mở rộng/thu gọn?

http://jsfiddle.net/Bq6eK/1

Answer 1

Đây là giải pháp của tôi rằng điều chỉnh chiều cao tự động: http://jsfiddle.net/9ccjE/

tôi đã sử dụng workaround rằng r3bel gửi: Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

này nên làm việc, đã phải cố gắng một thời gian quá ..: D

css3 animation jsfiddle

Answer 3

http://jsfiddle.net/Bq6eK/215/

tôi không sửa đổi mã của bạn cho giải pháp này, tôi đã viết của tôi thay vào đó. Giải pháp của tôi không hoàn toàn là những gì bạn đã yêu cầu, nhưng có lẽ bạn có thể xây dựng nó với kiến ​​thức hiện có. Tôi cũng đã nhận xét mã này để bạn biết chính xác tôi đang làm gì với những thay đổi đó.

Là giải pháp để "tránh đặt chiều cao trong JavaScript", tôi vừa tạo tham số 'maxHeight' trong hàm JS có tên toggleHeight. Bây giờ nó có thể được đặt trong HTML cho mỗi div của lớp có thể mở rộng.

Tôi sẽ nói điều này, tôi không phải là siêu kinh nghiệm với các ngôn ngữ front-end, và có một vấn đề mà tôi cần phải bấm vào nút 'Hiện/ẩn' hai lần trước khi hoạt ảnh bắt đầu. Tôi nghi ngờ đó là vấn đề với sự tập trung.

Vấn đề khác với giải pháp của tôi là bạn có thể thực sự tìm ra văn bản ẩn mà không cần nhấn nút hiển thị/ẩn chỉ bằng cách nhấp vào div và kéo xuống, bạn có thể đánh dấu văn bản không hiển thị và dán đến một không gian hiển thị.

Đề xuất của tôi cho một bước tiếp theo trên đầu trang của những gì tôi đã làm là để làm cho nó để hiển thị/ẩn nút thay đổi động. Tôi nghĩ rằng bạn có thể tìm ra cách để làm điều đó với những gì bạn đã dường như biết về hiển thị và ẩn văn bản với JS.

Answer 4

Đây là giải pháp không sử dụng JS. Nó sử dụng checkboxes thay thế.

Bạn có thể ẩn các hộp kiểm bằng cách thêm này để CSS của bạn:

.container input{ 
    display: none; 
} 

Và sau đó thêm một số phong cách để làm cho nó trông giống như một button.

Here's the source code that I modded.

Answer 5

OMG, tôi đã cố gắng để tìm một giải pháp đơn giản để này trong nhiều giờ . Tôi biết mã đơn giản nhưng không ai cung cấp cho tôi những gì tôi muốn. Vì vậy, cuối cùng đã làm việc trên một số mã ví dụ và làm một cái gì đó đơn giản mà bất cứ ai có thể sử dụng không có yêu cầu JQuery. Javascript và css và html đơn giản. Để hoạt ảnh hoạt động, bạn phải đặt chiều cao và chiều rộng hoặc hoạt ảnh sẽ không hoạt động. Tìm thấy điều đó một cách khó khăn.

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">