21

我正在尝试创建一个能够一次扩展多个面板的手风琴。我试图在 jQuery UI API 中找到它，但我还没有找到正确的方法。

如果有使用 jQuery UI 手风琴的方法，请告诉我。

4

3 回答 3

50

正如其他人所指出的，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 演示

于 2013-03-29T14:02:20.483 回答
8

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

于 2014-05-21T08:39:07.877 回答
6

根据定义，手风琴是一组以某种方式切换的扩展元素。你不想要那个。您只需要一组扩展元素。使用 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>
于 2013-03-29T12:54:26.717 回答