jQuery UI Accordion展开/折叠全部

Question

我在项目中使用jQuery UI Accordion(一次不允许打开多个项目).利用手风琴,因为我通常是合适的就只需要一次一个打开的面板.

但是,我需要提供一个"全部展开"链接,单击该按钮可切换到"全部折叠".我不想在这个要求周围自定义几乎相同的手风琴功能,所以我想要一些JS来实现这一点,同时保持Accordion组件的使用.

问题:在使用jQuery UI"Accordion"组件为标准功能提供支持的同时,需要哪些JavaScript/jQuery才能实现这一目标？

这是一个小提琴:http://jsfiddle.net/alecrust/a6Cu7/

Answer 1

正如 jQuery UI论坛中所讨论的那样,你不应该使用手风琴.

如果你想看起来像手风琴一样的东西,那很好.使用他们的类来设置它们的样式,并实现您需要的任何功能.然后添加一个按钮来打开或关闭它们都非常简单.例

HTML

通过使用jquery-ui类,我们将手风琴看起来就像"真正的"手风琴一样.

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

滚动你自己的手风琴

大多数情况下,我们只需要手风琴标题来切换以下兄弟的状态,这是它的内容区域.我们还添加了两个自定义事件"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;
});

展开/全部折叠

我们使用布尔isAllOpen标志来标记按钮何时被更改,这可能就像一个类,或者更大的插件框架上的状态变量一样.

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

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

"全开"时交换按钮

由于我们定制的"show"和"hide"事件,我们可以在面板变化时收听.唯一的特殊情况是"它们都打开",如果是,按钮应该是"全部折叠",如果不是,则应该"全部展开".

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

编辑注释: 维持"仅1个面板打开"除非您点击"全部展开"按钮实际上要容易得多.例

Answer 2

我的解决方案:

在真实的项目中工作.

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

Answer 3

其中很多似乎过于复杂.我通过以下方式实现了我想要的目标:

$(".ui-accordion-content").show();

的jsfiddle

Answer 4

最后,我发现这是考虑要求的最佳解决方案:

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});