Mở rộng/Thu gọn đơn giản divs> JQuery?

Question

Tôi cần thêm một số xử lý mở rộng/thu gọn kiểu accordian vào một loạt các div vùng chứa cha trong ứng dụng của tôi. Đây có phải là thứ quá đơn giản đối với một thư viện như jquery không?

Ví dụ:

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

Answer 1

Hãy thử một cái gì đó như thế này:

$('.handleDiv').click(function() { 
    $(this).children().toggle(); 
}); 

Điều đó sẽ mở rộng hoặc ẩn các nội dung của "handleDiv" s bất cứ khi nào bạn bấm vào chúng. Tôi khuyên bạn nên tạo những liên kết "mở rộng | thu gọn" và gắn trình xử lý nhấp chuột vào chúng, để một nhấp chuột ở bất kỳ vị trí nào trong div không chuyển đổi nó.

Nếu bạn muốn họ bắt đầu ra khép kín, một trong hai phong cách họ đóng trong stylesheet của bạn:

.handleDiv div { 
    display: none; 
} 

hoặc thêm một ".hide()" vào cuối của đoạn jQuery vào đầu câu trả lời của tôi .

Answer 2

Tôi vừa viết một plugin để làm điều đó.

Xem http://sylvain-hamel.github.io/simple-expand/