從懸停更改為點擊？

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事件處理程序，而不是click事件，如下所示：

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

單擊時，它將隱藏該元素（如果可見），否則將對其進行動畫處理。