jQuery reverse animation on click

问题

Looked through a few of the existing questions and they helped me get this far, but still cannot get it working.

$('#languageSelctor').click(function()
{
    $('#languageList').toggle(function()
    {
        $(this).animate({"top": "20px"},500);
    },  function() 
    {
        $(this).animate({"top": "-100px"},500);
    });
});

Managed to put together the above code, but now it just does not work. So when someone clicks on languageSelctor, languageList needs to appear and then disappear if they click on languageList again.

回答1:

$('#languageSelctor').click(function() {
    var $language = $('#languageList'),
        top = $language.css('top') === '-100px' ? '20px' : '-100px';
    $language.stop().animate({top: top}, 500);  
});

回答2:

You can simply use this to hide and show the content.

$('#languageSelctor').click(function()
{
    $('#languageList').toggle();
});

$('#languageList').click(function()
{
    $(this).hide();
});

.toggle()

来源：https://stackoverflow.com/questions/16520218/jquery-reverse-animation-on-click