Изменение от наведения до щелчка?

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

это должно работать

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

Answer 2

Вы можете сделать:

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

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

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

Answer 3

Вы можете, вероятно, просто использовать toggle event handler вместо событие щелчка, как так:

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