jQuery UI手风琴：同时打开多个面板

Question

我正在尝试创建一个手风琴菜单，可以同时展开多个面板。我已经在jQuery UI API中试图找到它，但还没有找到合适的方法。

如果有使用jQuery UI手风琴实现此功能的方法，请告诉我。

- Tarun

---

这可能会有所帮助：http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once - techfoobar

由于设计原因，jQuery UI手风琴不支持此功能。 - Andrei

请查看此链接：http://jsfiddle.net/AR57Y/ - rajesh kakawat

我改进了http://jsfiddle.net/AR57Y，如果您单击标题而不是三角形图标，则不会滚动到页面顶部：http://jsfiddle.net/HotFusionMan/y3vN5/1 - Al Chou

可能是重复的问题：jQuery UI手风琴如何保持多个部分打开？ - Simon East

Answer 1

正如其他人所指出的，Accordion小部件没有直接执行此操作的API选项。但是，如果您必须使用该小部件，则可以使用beforeActivate事件处理程序选项来破坏并模拟小部件的默认行为从而实现此目的。

例如：

$('#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; // Cancel the default action
    }
});

查看jsFiddle演示

- Boaz

---

谢谢Boaz，我还没有尝试过，但根据你的脚本，它肯定可以与可访问性一起使用。 - Tarun

@Boaz 嘿，我已经尝试在我的页面上实现这个功能，但现在所有的内容div都有相同的高度。我无法弄清楚发生了什么。http://stackoverflow.com/questions/29327520/custom-accordion-content-divs-all-share-same-size-no-idea-why - Miha Šušteršič

@MihaŠušteršič 已在原帖中回答。基本上，面板的高度可以通过手风琴的 styleHeight 属性来设置，在您的情况下，应该是 styleHeight:'content'。 - Boaz

+1 完美运行！在这一行代码中：currContent.toggleClass('accordion-content-active',!isPanelSelected)，你漏掉了一个分号 ;) - Philipp

这在jQuery UI 1.9.2中有效（发布于2012年），该版本用于示例fiddle。虽然它仍然适用于至少1.10.4，但是更新的jQuery UI版本在调用手风琴上的刷新方法时会使面板处于半开状态。（在内部，小部件使用活动面板的索引，因此它被强烈编码为一次只允许打开一个面板）。我的当前方法可能需要注意哪些面板是打开的，将它们全部关闭，刷新，然后重新打开之前打开的那些面板。有很多动画效果，但目前不确定还有其他方法可以使其正常工作。 - jinglesthula

Answer 2

您可以编写多个叠放的手风琴，每个手风琴只有一个面板。这样，各个面板可以单独切换。

- anssi

Answer 3

按照定义，手风琴是一组可以以某种方式切换并展开的元素。但您可能不需要这样的功能，只需要一组可展开的元素。使用jQuery非常容易实现。通常只需要以下代码：

$('.my-heading-class').on('click', function() {
   $(this).next('.my-content-class').slideToggle();
});

<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>

- isherwood

---

jQuery UI手风琴并不是一个简单的幻灯片切换，它们在可访问性、键盘快捷键、焦点等方面处理了很多事情。 - Tarun

没错。我没有提到jQuery UI手风琴。我是以一般的方式提到手风琴功能，这似乎是适合上面问题的。 - isherwood