jQuery UI accordion giữ nhiều phần mở?

Tôi có thể là một thằng ngốc, nhưng làm thế nào để bạn giữ nhiều phần trong accordion của jQuery UI mở? Tất cả các bản trình diễn chỉ có một lần mở tại một thời điểm ... Tôi đang tìm kiếm một hệ thống loại menu có thể thu gọn.

Điều này ban đầu đã được thảo luận trong tài liệu giao diện người dùng jQuery cho Accordion :

LƯU Ý: Nếu bạn muốn mở nhiều phần cùng một lúc, không sử dụng đàn accordion

Một đàn accordion không cho phép mở nhiều hơn một bảng nội dung cùng một lúc và cần rất nhiều nỗ lực để làm điều đó. Nếu bạn đang tìm kiếm một tiện ích cho phép mở nhiều bảng nội dung, không sử dụng tiện ích này. Thông thường, nó có thể được viết bằng một vài dòng jQuery, như thế này:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

Hoặc hoạt hình:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"I can be a ngu" - Bạn không phải là một tên ngốc nếu bạn không đọc tài liệu, nhưng nếu bạn đang gặp vấn đề, nó thường tăng tốc độ tìm ra giải pháp.

Khá đơn giản:

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

Đã đăng điều này trong một chủ đề tương tự, nhưng nghĩ rằng nó cũng có thể liên quan ở đây.

Đạt được điều này với một phiên bản jQuery-UI Accordion duy nhất

Như những người khác đã lưu ý, Accordiontiện ích không có tùy chọn API để thực hiện điều này trực tiếp. Tuy nhiên, nếu vì lý do nào đó bạn phải sử dụng tiện ích con (ví dụ: bạn đang duy trì một hệ thống hiện có), bạn có thể đạt được điều này bằng cách sử dụng beforeActivatetùy chọn trình xử lý sự kiện để lật đổ và mô phỏng hành vi mặc định của tiện ích con.

Ví dụ:

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

Xem bản trình diễn jsFiddle

Hay đơn giản hơn nữa?

<div class="accordion">
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>    
<div class="accordion">
    <h3><a href="#">Second</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
</div>         
<div class="accordion">
    <h3><a href="#">Third</a></h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false });
</script>

Tôi đã tạo một plugin jQuery có giao diện giống như jQuery UI Accordion và có thể giữ tất cả các tab \ phần mở

bạn có thể tìm thấy nó ở đây

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

hoạt động với cùng một đánh dấu

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Mã Javascript

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

CẬP NHẬT: plugin đã được cập nhật để hỗ trợ tùy chọn tab hoạt động mặc định

CẬP NHẬT: Plugin này hiện không được dùng nữa.

Trên thực tế đã tìm kiếm trên internet để tìm giải pháp cho điều này trong một thời gian. Và câu trả lời được chấp nhận cho câu trả lời tốt "bởi cuốn sách". Nhưng tôi không muốn chấp nhận điều đó nên tôi đã tiếp tục tìm kiếm và tìm thấy điều này:

http://jsbin.com/eqape/1601/edit - Ví dụ trực tiếp

Ví dụ này kéo theo các kiểu phù hợp và thêm chức năng được yêu cầu cùng lúc, hoàn chỉnh với khoảng trống để viết thêm chức năng của riêng bạn trên mỗi lần nhấp vào tiêu đề. Cũng cho phép nhiều div nằm giữa các "h3".

 $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()


        .next().toggleClass("ui-accordion-content-active").slideToggle();
        return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();

Mã HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion  styles</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


</head>
<body>

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div class="content">
    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.
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
    suscipit faucibus urna.
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div class="top">
  Top top top top
  </div>
  <div class="content">
    Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <div class="bottom">
  Bottom bottom bottom bottom
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
    mauris vel est.
    Suspendisse eu nisl. Nullam ut libero. Integer  dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per
    inceptos himenaeos.
  </div>
</div>

</body>
</html>`

Tôi đã tìm thấy một giải pháp khó. Cho phép gọi cùng một hàm hai lần nhưng với id khác nhau.

Mã JQuery

$(function() {
    $( "#accordion1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#accordion2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

Mã HTML

<div id="accordion1">
    <h3>Section 1</h3>
    <div>Section one Text</div>
</div>
<div id="accordion2">   
    <h3>Section 2</h3>
    <div>Section two Text</div>
</div>

Đơn giản, tạo nhiều div accordian, mỗi div đại diện cho một thẻ liên kết như:

<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>

Nó thêm một số đánh dấu. Nhưng hoạt động như một ...

Đơn giản: kích hoạt đàn accordion cho một lớp, và sau đó tạo div với cái này, như các trường hợp bội của đàn accordion.

Như thế này:

JS

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
    })
});

HTML

<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>

https://jsfiddle.net/sparhawk_odin/pm91whz3/

Chỉ cần gọi mỗi phần của đàn accordion là đàn accordion của riêng nó. active: n sẽ là 0 cho phần đầu tiên (vì vậy nó sẽ hiển thị) và 1, 2, 3, 4, v.v. cho phần còn lại. Vì mỗi chiếc là đàn accordion riêng nên tất cả chúng sẽ chỉ có 1 phần và phần còn lại sẽ được thu gọn để bắt đầu.

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});

Đơn giản hơn nữa, hãy gắn nhãn nó trong mỗi thuộc tính lớp của thẻ li và có jquery để lặp qua từng li để khởi tạo đàn accordion.

Nếu không có jQuery-UI accordion, người ta có thể đơn giản làm điều này:

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

Và js

$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/

mở jquery-ui - *. js

tìm thấy $.widget( "ui.accordion", {

tìm thấy _eventHandler: function( event ) { bên trong

thay đổi

var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive && options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };

đến

var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive && options.collapsible;

    if (clickedIsActive == true) {
        var toShow = $();
        var toHide = clicked.next();
    } else {
        var toShow = clicked.next();
        var toHide = $();

    }
    eventData = {
        oldHeader: $(),
        oldPanel: toHide,
        newHeader: clicked,
        newPanel: toShow
    };

trước active.removeClass( "ui-accordion-header-active ui-state-active" );

thêm if (typeof(active) !== 'undefined') {và đóng}

thưởng thức

Bạn chỉ cần sử dụng hàm each () jquery;

$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});