从悬停更改为单击？

Question

我最近在我的网站页面底部实现了一个小框，当鼠标悬停在它上面时可以展开......这就是代码，一切都很好。

CSS

#box{
    position:absolute;
    width:300px;
    height:20px;
    left: 33%;
    right: 33%;
    min-width: 32%;
    bottom:0;
    background-color: #353535;
}

javascript

$('#box').hover(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

但我很好奇如何将其更改为通过单击而不是鼠标悬停在其上来打开和关闭？

我已将其编辑为...

$('#box').click(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

这可以打开盒子。但我无法通过再次单击使其再次关闭。

如此接近却又如此遥远！ ：P

Answer 1

这应该有效

$('#box').toggle(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

Answer 2

您可能可以只使用 toggle 事件处理程序 而不是点击事件，如下所示：

$('#box').toggle(function() {...}, function() {...});

Answer 3

您可以执行以下操作：

$('#box').click(function() {
  if ($(this).is(':visible')) {
    $(this).hide();
    return;
  }

  $(this).animate({height: '220px'}, 150);
});

单击时，它将隐藏该元素（如果可见），否则为其设置动画。