Javascript 保持多个部分打开的jQuery UI手风琴？

我可能是个白痴，但如何保持jQueryUI的手风琴中的多个部分处于打开状态？演示一次只能打开一个。。。我正在寻找一个可折叠的菜单类型系统。

这在：

注意：如果需要多个部分 立即打开，不要使用手风琴

手风琴最多只能演奏一次 一个内容面板将在 同时，这需要很多时间 努力做到这一点。如果你在找 对于允许多个 要打开的内容面板，请不要使用 这通常它可以用 相反，jQuery的几行代码 像这样：

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

或动画：

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

---

“我可能是个白痴”-如果你不阅读文档，你就不是白痴，但是如果你有问题，它通常会加快找到解决方案的速度。

我已经做了一个jQuery插件，它具有与jQuery UI Accordion相同的外观，可以保持所有选项卡\部分打开

您可以在这里找到它

使用相同的标记

<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>

更新： 该插件已更新为支持默认的活动选项卡选项

更新： 此插件现在已被弃用

非常简单：

<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>

（函数（$）{
$（函数（）{
$（“#accordion>div”）.accordion（{标题：“h3”，可折叠：true}）；
})
})（jQuery）；
Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。
菲塞勒斯·马蒂斯·丁西登·尼布。
南对岸，拍卖人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>

Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。Lorem ipsum dolor sit amet。
菲塞勒斯·马蒂斯·丁西登·尼布。
南对岸，拍卖人a，贵人奎斯。
$（“.accordion”）.accordion（{可折叠：真，活动：假}）；

我找到了一个棘手的解决方案。让我们用不同的id调用同一个函数两次

JQuery代码

HTML代码

第一节
第一节案文
第二节
第二节案文

在一个类似的帖子中发布了这篇文章，但认为它可能也与此相关

使用jQuery UI Accordion的单个实例实现这一点

正如其他人所指出的，

Accordion

小部件没有直接执行此操作的API选项。但是，如果出于某种原因必须使用小部件（例如，您正在维护现有系统），则可以通过使用事件处理程序选项来颠覆和模拟小部件的默认行为来实现这一点

例如：

$('#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
    }
});

---

请看a将手风琴的每个部分称为自己的手风琴。活动：第一个n为0（因此将显示），其余为1、2、3、4等。因为每一个都是它自己的手风琴，它们都只有一个部分，其余部分将折叠开始

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

---

更简单的是，将它标记在每个li标记的class属性中，并让jquery在每个li中循环以初始化手风琴。

实际上在互联网上搜索了一段时间来解决这个问题。而被接受的答案给出了良好的“按部就班”的答案。但我不想接受这一点，所以我一直在搜索并发现：

-实例

本例引入了适当的样式，同时添加了所需的功能，并在每次单击标题时添加了自己的功能。还允许多个div位于“h3”之间

$（“#notaccordion”）.addClass（“ui手风琴ui手风琴图标ui小部件ui帮助器重置”）
.查找（“h3”）
.addClass（“ui手风琴头ui助手重置ui状态默认ui角顶部ui角底部”）
.hover（函数（）{$（this）.toggleClass（“ui状态悬停”）；}）
.prepend（“”）
。单击（函数（）{
$（this）.find（“>.ui-icon”）.toggleClass（“ui-icon-triangle-1-e ui-icon-triangle-1-s”）.end（）
.next（）.toggleClass（“ui手风琴内容活动”）.slideToggle（）；
返回false；
})
.next（）
.addClass（“ui手风琴内容ui助手重置ui小部件内容ui角底部”）
.hide（）；

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>`

使用ui手风琴样式切换面板（非手风琴）
正文{字体：62.5%Verdana，Arial，无衬线}
切换面板
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特、夸姆。整数
乌特内克。胎膜早破，胎膜早破，妊娠期，调味品
阿梅特，努克。南阿尼布。Donec suscipit Peros。南美。普罗因维韦拉利奥大学
奥迪奥。马勒苏阿达库拉比图尔酒店。前庭是一个圆滑的节杖。
塞德·努尔纳。别着急。叶舌。前庭
普卢斯。Vivamus hendrerit，aliquet laoreet的dolor，mauris turpis porttitor
维利特，我要告诉你自由。不夸姆万岁。在里面
suscipit faucibus urna。
顶
Nam enim risus，molestie et，porta ac，aliquam ac，risus。奎斯克·洛博蒂斯。
马萨的Phasellus Pellentsque purus。埃尼安在佩德。自由之旅
ac tellus pellentesque semper。塞德·ac·费利斯。塞德·康莫多，麦格纳·奎斯
拉齐尼亚·奥纳雷、尼西和威尼斯酒后驾车。

第一项
清单项目二
清单项目三

底部
粗俗的格言。佩伦特式居住者morbi tristique Sentecus et netus
这是一个非常有名的地方。第一同侧前庭
虎鱼和乌龟；埃尼亚拉西尼亚酒店
莫里斯·维尔伊斯特。
暂停欧盟nisl。自由女神。整型贵宾会议。
每一个康努比亚诺斯特拉，每一个
伊塞普托斯·希梅纳奥斯。
`

简单，创建多个手风琴div，每个代表一个锚定标记，如：

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

它加起来是

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

 $("#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();

<!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>`

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

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            };

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
    };

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

<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>

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

<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>

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