允许打开所有 JQuery 个手风琴部分

Question

我有一个完全可用的 JQuery 手风琴，除了我想要打开所有部分的能力。要实现这一点，用户必须能够打开一个部分而不会折叠另一个部分。

这有点违反直觉，但现实生活中的手风琴也可以完全展开。

$(document).ready(function() {
  $("#accordion").accordion({
    heightStyle: 'content',
    collapsible: true,
    toggle: false
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    A
  </div>
  <h3>Section 2</h3>
  <div>
    B
  </div>
  <h3>Section 3</h3>
  <div>
    C
  </div>
  <h3>Section 4</h3>
  <div>
    D
  </div>
</div>

JS Fiddle: https://jsfiddle.net/xu9d53ta/

我该如何实现？

Answer 1

试试这个：

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

// add the accordion functionality
headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');
 
    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

// hook up the expand/collapse all
expandLink.click(function(){
    $(".ui-accordion-content").show();
});

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

.accordion-expand-holder {
    text-align: center;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<p class="accordion-expand-holder">
    <a class="accordion-expand-all" href="#">Expand all</a>
</p>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">

    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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>
        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 2
    </h3>
     <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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>
        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 3
    </h3>
     <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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>

Fiddlelink: https://jsfiddle.net/s5hAw/1091/

学分：

允许打开所有 JQuery 个手风琴部分

Allow all JQuery accordion sections to be open

jquery

jquery-ui

jquery-ui-accordion