再点击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');
});

Answer 2

如果始终是第二次点击，则应使用fadeToggle()代替。