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

您可以使用toggle event handler代替点击事件，如下所示：

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

Answer 2

这应该有效

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

Answer 3

你可以这样做：

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

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

在点击时，它会隐藏元素，如果可见，则为其设置动画。

从悬停变为点击？

3 个答案: