Javascript 从悬停更改为单击？

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

CSS

javascript

但我很好奇，我会如何改变这个，让它在点击时打开和关闭，而不是鼠标悬停在它上面

我把它编辑成

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

这可以打开盒子。但我不能让它再次关闭与另一个点击

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

您可以执行以下操作：

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

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

---

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

您可能只需使用而不是单击事件，如下所示：

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

这应该行得通

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

---

你在用什么图书馆？是否可能悬停函数需要两个参数，而单击函数只需要一个参数？我看到您现在添加了jQuery标记。。。好的嗨，谢谢你的回复，但这不起作用。当我点击屏幕底部的框而不是弹出时，它就消失了。

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

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