javascript - 如何只有一把打开的 Accordion ？

Question

我有一系列 Accordion ，但我只想一次扩展一个。目前全部可以打开。

<强> http://codepen.io/anon/pen/uaytq

$('.collapse-toggle').click(function (e) {
    var that = $(this).parent();
    var accordion = that.find('.collapse-content');

    if (accordion.hasClass('open')) {
        accordion.removeClass('open');
        accordion.animate({ height: 0 }, 300);
    } else {
        var currentHeight = accordion.height(); //save current height
        accordion.css('height', 'auto');        //temporary switch height to auto
        var autoHeight = accordion.height();    //get auto height
        accordion.css('height', currentHeight); //switch back to current height
        accordion.animate({ height: autoHeight }, 300); //animate that beautiful thing
        accordion.addClass('open');             //let the people know!
    }
});

Answer 1

您只需关闭当前打开的一个，然后再打开一个新的。

$('.collapse-content.open') 将定位当前打开的 Accordion 。如果页面上有超过 1 个 Accordion，那么您需要进一步遍历 dom 树以获取当前 Accordion 的父容器(在本例中为 .wrap)

if (accordion.hasClass('open')) {
    accordion.removeClass('open');
    accordion.animate({ height: 0 }, 300);
} else {
    $('.collapse-content.open').animate({ height: 0 }, 300).removeClass('open');
    var currentHeight = accordion.height(); //save current height
    accordion.css('height', 'auto');        //temporary switch height to auto
    var autoHeight = accordion.height();    //get auto height
    accordion.css('height', currentHeight); //switch back to current height
    accordion.animate({ height: autoHeight }, 300); //animate that beautiful thing
    accordion.addClass('open');             //let the people know!
}

http://codepen.io/anon/pen/ufskl

我不确定你的开放类的作用，但如果它稍后有一些 css 影响，并且你需要在 Accordion 项目关闭结束时删除它，那么请执行此操作

$('.collapse-content.open').animate({ height: 0 }, 300, function() {
    $(this).removeClass('open');
});