Tôi có thể mở rộng/thu gọn nội dung của JQuery ui Accordion bằng cách nhấp vào một thành phần khác không?

Question

Theo mặc định, có tiêu đề nội dung để kiểm soát mở rộng/thu gọn. Nhưng trong trường hợp của tôi, tôi cũng có thể mở rộng/thu gọn nội dung của các thành phần khác. Ví dụ:

cấu trúc cơ bản của jquery đang ui accodion:

<script> 
    $(function() { 
     $("#accordion").accordion(); 
    }); 
    </script> 



<div class="demo"> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
     </p> 
    </div> 
...... 
</div> 

và bây giờ. Tôi có một yếu tố khác, giống như:

<ul id="another elements can expand/collapse too"> 
    <li><a href=""> expand/collapse contents of section1 of id=accordion too</a></li> 
........ 
</ul> 

cảm ơn bạn rất nhiều !!

Answer 1

Bạn có thể sử dụng .activate với sai được chuyển vào để thu gọn tất cả các phần tử theo chương trình. Vì bạn chỉ có một phần tử mở tại một thời điểm, điều này sẽ làm việc để thu gọn bất kỳ phần tử nào đang mở hiển thị liên kết đó. Điều này sẽ chỉ hoạt động nếu bạn có collapsible được đặt thành true.

Bạn có thể chuyển vào yếu tố nào khác mà bạn muốn mở rộng để mở rộng yếu tố đó khi nhấp.

Answer 2

Collapse accordion tab:

$('.accordion').accordion('activate', false); 

Mở rộng tab accordion đầu tiên:

$('.accordion').each(function (idx, item) { 
    if ($(item).accordion("option", "active") === false) { 
     $(item).accordion('activate', 0); 
    } 
}); 

Answer 3

tôi để gặp rắc rối khi các accordion sụp đổ/mở rộng sau khi họ đã bước đầu nạp. Để giải quyết vấn đề này, tôi đã sử dụng:

$('#accordionId h3').click(); 

... bắt chước nhấp vào vùng tiêu đề và sẽ buộc bật/tắt các lớp kích hoạt.

Cảm thấy giống như một hack, nhưng đó là những gì đã hiệu quả, Tốt nhất.

Answer 4

Sau khi cập nhật giao diện người dùng JQuery, không có phương thức "hoạt động" trên accordion. Vì vậy, để sụp đổ tất cả accordions sử dụng:

$('.accordion').accordion('option', {active: false}); 

Answer 5

Sử dụng Bootstrap:

//To Expand 
    var elem = $(this).find('.accordionElement'); 
    elem.addClass("in"); 
    elem.attr("style",""); 
    elem.attr("aria-expanded",true); 

sau đó bạn có thể sụp đổ sử dụng:

var elem = $(this).find('.accordionElement'); 
    elem.removeClass("in"); 
    elem.attr("style","height: 0px;"); 
    elem.attr("aria-expanded",false);