JQuery Accordion 展开/折叠每个标题而不折叠展开的标题答案

【问题标题】：JQuery Accordion expand/collapse every header without collapsing the expanded headersJQuery Accordion 展开/折叠每个标题而不折叠展开的标题
【发布时间】：2013-12-07 21:27:07
【问题描述】：

我是 JQuery 世界的新手。我决定为我的程序使用 JQuery 手风琴控件。但我需要的功能似乎不支持手风琴控制。我需要通过单击它来展开/折叠每个标题而不折叠展开的标题。我在JS Bin 找到了一个示例，但它似乎对我不起作用，我使用的是 JQuery UI 1.10.3。我该如何解决这个问题？是否可以覆盖 Accordion 控制功能以达到目标？

【问题讨论】：

你能在 jsfiddle 中分享你的代码吗

标签： javascript jquery jquery-ui

【解决方案1】：

该示例使用 jQuery slideToggle 函数来切换状态。在 JQuery 中也有函数：

// "Open" element
$('div').slideDown();

和

// "Close" element
$('div').slideUp();

例如打开手风琴下的所有 div:s：

$('.accordion div').slideDown();

【讨论】：

【解决方案2】：

将以下内容添加到您的 JS 中

$.fn.togglepanels = function(){
  return this.each(function(){
    $(this).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)
        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
        .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
        .next().slideToggle();
      return false;
    })
    .next()
      .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();
  });
};

$("#notaccordion").togglepanels();\\GIVE YOUR ACCORDIONID IN THE PLACE OF **#notaccordion**

DEMO

【讨论】：

【解决方案3】：

在您提供的 jsbin 示例中，将第二行替换为以下行：

$accordionIO.next('div').hide();

【讨论】：