javascript - 第二次点击 jQuery

Question

我正在尝试制作一个动画，当我单击搜索图标时，它会在搜索输入中淡入淡出并添加一个类以使其更宽。问题是我不知道如何在搜索输入已经显示后的第二次点击中使其淡出:

这是我的代码:

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

Answer 1

jQuery 中还有一个fadeToggle。试试这个:

$('#menu_search').click(function(){
    $('.search_input').fadeToggle().toggleClass('full');
});