Переходя от наведения к нажатию?

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

Вы, вероятно, можете просто использовать обработчик событий переключения вместо события 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);
});

При щелчке он будет скрывать элемент, если он виден, иначе оживите его.