再点击jQuery(Second click jQuery)

 我试图制作一个动画，当我点击一个搜索图标时，它会淡入搜索输入并添加一个类以使其更宽。 问题是我不知道在搜索输入已经显示之后如何在第二次点击时使其变为fadeOut： 
 
 这是我的代码： 
 
    $('#menu_search').click(function(){
        $('.search_input').fadeIn().toggleClass('full');
    });


    <li id="menu_search">
        <a href="javascript:void(0)"></a>
        <div class="search_input_container">
            <input type="text" class="search_input" value="Buscar">
        </div>
    </li>


        &#menu_search{
            background: url('../img/sprites.png') #000 2px 2px;
            width: 34px;
            height: 28px;
            padding: 0;
            margin-right: 0;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .search_input_container{
                width: 500px;
                height: 30px;
                position: absolute;
                z-index: 20;
                left: -466px;
                .search_input{
                    float: right;
                    width: 100px;
                    background: #ffffff;
                    height: 30px;
                    border: none;
                    .round_corners();
                    .animate();
                    display: none;
                    &.full{
                        width: 772px;
                        display: block;
                    }
                }
            }
        }

I´m trying to make an animation that when I click on a search icon, it fadeIn the search input and add a class to make it wider. The problem is that I don´t know how to make it fadeOut in the second click after the search input it´s already displayed:
 
this is my code:
 
    $('#menu_search').click(function(){
        $('.search_input').fadeIn().toggleClass('full');
    });


    <li id="menu_search">
        <a href="javascript:void(0)"></a>
        <div class="search_input_container">
            <input type="text" class="search_input" value="Buscar">
        </div>
    </li>


        &#menu_search{
            background: url('../img/sprites.png') #000 2px 2px;
            width: 34px;
            height: 28px;
            padding: 0;
            margin-right: 0;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .search_input_container{
                width: 500px;
                height: 30px;
                position: absolute;
                z-index: 20;
                left: -466px;
                .search_input{
                    float: right;
                    width: 100px;
                    background: #ffffff;
                    height: 30px;
                    border: none;
                    .round_corners();
                    .animate();
                    display: none;
                    &.full{
                        width: 772px;
                        display: block;
                    }
                }
            }
        }

原文：https://stackoverflow.com/questions/15269581