Javascript 单击按钮时增加div的高度，再次单击同一按钮时减小div的高度

我有一个高度为0px的div，当我点击一个按钮时，我希望它将高度增加到300px

当我再次单击按钮时，我希望它再次达到0px的高度

CSS

JS

如果我只使用：

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

动画效果很好。只要我加上另一行，它就不会。我还尝试使用

toggle（）

函数，但结果是，一旦我加载页面，toggle函数的第二部分（即

height:0，opacity:0

）就会自动加载

这是一个

有什么想法吗？谢谢

编辑

---

我忘了说我正在使我的网站具有响应性，并且这个js代码只涉及移动版本，所以要查看结果，您应该将浏览器宽度设置为480px或更小，您试图同时调用这两个函数。一个函数要增加

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');

    }
});

$（“#汉堡”）。单击（函数（）{
var maxHeight=300；
如果（+$（'nav'）.height（）

要使其更短，您可以执行以下操作：

$("#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');
});

$（“#汉堡”）。单击（函数（）{
var maxHeight=300，
资产净值=$（“资产净值”）；
设置动画（{height:+nav.height（）

顺便说一下，随机的

+

符号将任何字符串键入数字，以防万一

$("#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');
});