第二次点击jQuery

Question

我试图做一个动画，当我点击一个搜索图标，它淡入搜索输入并添加一个类，使其更宽。问题是，我不知道如何使它在第二次点击后淡出搜索输入it's已经显示：

这是我的代码：

$('#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()来代替。