Javascript 具有动画高度的jQuery手风琴式菜单

我有一点问题，切换效果，我试图设置（几乎像一个手风琴菜单），但它的动画高度。问题是，由于click toggle被弃用，我有一个问题，如果你打开一个菜单，然后关闭该菜单，再打开另一个。。。它很好用。。。但是，如果您打开一个菜单，然后单击另一个而不关闭，则必须单击两次ti以重置false/true变量集

我在下面包含了我的代码（简化）和一个JSFIDLE

我希望它尽可能像“手风琴”一样。。。无论菜单是否打开，菜单都会设置“打开”和“关闭”的动画

var subMenuClicked = false;
$('.each-dropdown-container h3').on('click', function (e) {
    if (!subMenuClicked) { // First click
        $(this).addClass('active');
        var el = $(this).next('.reveal');
        var curHeight = el.height();
        var autoHeight = el.css('height', 'auto').height();
        el.height(curHeight).animate({
            height: autoHeight
        }, 500); //
        subMenuClicked = true;
    } else { // Second click
        $(this).removeClass('active');
        $(this).next('.reveal').animate({
            height: 0
        }, 500);
        subMenuClicked = false;
    }
    e.preventDefault();
});

---

您所要做的就是检查类是否处于活动状态，如下所示：

//var subMenuClicked = false; you don't need anymore
$('.each-dropdown-container h3').on('click', function (e) {
    if (!$(this).hasClass("active")) { //here check if has class active instead of use a bool variable
        $(this).addClass('active');
        var el = $(this).next('.reveal'); //
        var curHeight = el.height(); //
        var autoHeight = el.css('height', 'auto').height(); //
        el.height(curHeight).animate({
            height: autoHeight
        }, 500); //
        //subMenuClicked = true; remove this
    } else { // Second click
        $(this).removeClass('active');
        $(this).next('.reveal').animate({
            height: 0
        }, 500); //
        //subMenuClicked = false; remove this
    }
    e.preventDefault();
});