从悬停变成点击？答案

【问题标题】：Changing from hover to click?从悬停变成点击？
【发布时间】：2011-02-09 10:55:14
【问题描述】：

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

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

【问题讨论】：

你用的是什么库？是否有可能悬停函数需要两个参数而点击函数只需要一个？
我看到你现在已经添加了 jQuery 标记...很好！

标签： javascript jquery popup click hover

【解决方案1】：

这应该可以工作

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

【讨论】：

【解决方案2】：

您可能只使用toggle event handler 而不是像这样的点击事件：

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

【讨论】：

【解决方案3】：

你可以这样做：

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

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

点击时，如果元素可见，它将隐藏元素，否则会对其进行动画处理。

【讨论】：

您好，感谢您的回复，但这不起作用。当我点击屏幕底部的框而不是它弹出时，它就消失了。