javascript - jQuery UI Accordion 展开/折叠全部

Question

我正在使用 jQuery UI Accordion (不允许一次打开多个项目)一个项目。使用 Accordion 是合适的，因为我通常确实一次只想打开一个面板。

但是，我需要提供一个“全部展开”链接，单击该链接会切换到“全部折叠”。我不想围绕这个要求自定义编写几乎相同的 Accordion 功能，所以我想要一些 JS 来实现这一点，同时保持 Accordion 组件在使用中。

问题:在仍然使用 jQuery UI“ Accordion ”组件来支持标准功能的同时，需要什么 JavaScript/jQuery 来实现这一点？

这是一个 fiddle :http://jsfiddle.net/alecrust/a6Cu7/

Answer 1

As discussed在 jQuery UI 论坛中，您不应该为此使用 Accordion 。

如果您想要外观和功能都像 Accordion 的东西，那很好。使用它们的类来设置它们的样式，并实现您需要的任何功能。然后添加一个按钮来打开或关闭它们都非常简单。 Example

HTML

通过使用 jquery-ui 类，我们让 Accordion 看起来就像“真正的” Accordion 。

<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">
        Content 1
    </div>
</div>​

自己动手做 Accordion

大多数情况下，我们只希望 Accordion 标题切换以下兄弟的状态，即它的内容区域。我们还添加了两个自定义事件“show”和“hide”，稍后我们将对其进行挂接。

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

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

全部展开/折叠

我们使用一个 bool 值 isAllOpen 标志来标记按钮何时被更改，这很容易成为一个类，或者是更大插件框架上的状态变量。

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

“全开”时切换按钮

感谢我们自定义的“显示”和“隐藏”事件，当面板发生变化时，我们可以监听一些东西。唯一的特殊情况是“它们都打开了吗”，如果是，按钮应该是“全部折叠”，如果不是，则应该是“全部展开”。

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

编辑评论:除非您点击“全部展开”按钮，否则保持“仅打开一个面板”实际上要容易得多。 Example