Question

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

我在下面包含了我的代码（简化）和JSFiddle。

http://jsfiddle.net/qtuwwhpz/

我希望它尽可能像'手风琴'一样......无论是否开放，菜单都会打开和关闭。

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

Answer 1

您所要做的就是检查是否有类活动如下：

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

fiddle

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

1 个答案: