javascript - 单击按钮时增加 div 的高度，并在我再次单击同一按钮时减小它

Question

我有一个带有 height:0px 的 div，我希望它在我单击按钮时将高度增加到 300px。

当我再次点击按钮时，我希望它再次获得 0px 的高度。

CSS

nav{
    height:0px;
    overflow:hidden;
    opacity:0;
}

JS

    $("#hamburger").click(function(){
            $('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
        },function(){
            $('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
    });

如果我只使用:

$("#hamburger").click(function(){
        $('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
});

动画效果。一旦我添加另一行，它就不会。我也尝试使用 toggle() 函数，但结果是，一旦我加载我的页面，切换函数的第二部分(即 height:0, opacity:0 ) 自行加载。

这是一个link to my website

有什么想法吗？谢谢

编辑

忘了说我的网站是响应式的，而且这个js代码只针对手机版，所以要看效果，你应该将浏览器宽度设置为480px或更小

Answer 1

您正在尝试同时调用这两个函数。一个函数想要增加 div 的高度，另一个想要降低 div 的高度。

尝试这样的事情:

$("#hamburger").click(function(){
    var maxHeight = 300;

    if(+$('nav').height() < maxHeight) {

        $('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');

    } else if (+$('nav').height() === maxHeight) {

        $('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');

    }
});

为了让它更短，你可以这样做:

$("#hamburger").click(function(){
    var maxHeight = 300,
        nav = $('nav');

        nav.stop().animate({ height: +nav.height() < maxHeight ? 300 : 0, opacity: +nav.css('opacity') === 1 ? 0 : 1 }, 'slow');
});

顺便说一句，以防万一，随机的 + 符号会将任何字符串转换为数字。