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

顺便说一句，随机+标志将任何字符串都转换成数字，以防万一。

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

1 个答案: