jQuery簡單：兩個功能碰撞

Question

這是關於菜單上的「聯繫」項目。當你點擊它時，它會切換高低出現在div上的高度。工作正常。另外，我想放一個「X」按鈕。

問題是：當我點擊「聯繫」時，它彈出。我點擊X並彈出。但是如果我再次點擊「Contato」，它只有在我執行兩次時纔有效。

你們有什麼想法可以改進我可憐的jQuery來解決這個問題嗎？

這是現場直播： http://www.arthurfalcao.com.br

<section id="contato"> 
      <article id="info"> 
       <p>21 8668 1419</p> 
       <p>22 7836 4351</p> 
       <p>87*146596</p> 
       <a href="mailto:artfalcao@gmail.com" title="E-mail para contato" target="_blank">artfalcao@gmail.com</a> 
      </article> 
      <div class="contato"> 
       <span class="close">X</span> 
       <?php echo do_shortcode("[si-contact-form form='1']"); ?> 
      </div> 
     </section> 

     <script> 
      jQuery("#menu-item-21 a").click(function() { 
       jQuery(this).toggleClass("black"); 
      }); 
      jQuery("#menu-item-21").toggle(function(){ 
       jQuery("#contato").animate({height:375},600); 
       jQuery("#info").animate({height:0},700);}, 
       function(){ 
       jQuery("#contato").animate({height:150},600); 
       jQuery("#info").animate({height:115},700); 
      }); 

     </script> 
     <script> 
      jQuery(".close").click(function() { 
       jQuery('#contato').animate({height:150},700); 
       jQuery("#info").animate({height:115},700); 
      }); 
      jQuery("#menu-item-21 a").click(function() { 
       jQuery(this).removeClass("black"); 
      });   
     </script> 

Answer 1

更改此

 jQuery(".close").click(function() { 
      jQuery('#contato').animate({height:150},700); 
      jQuery("#info").animate({height:115},700); 
     }); 

到

 jQuery(".close").click(function() { 
      jQuery('#menu-item-21').trigger('click'); 
     }); 

您所遇到的問題是由於您使用的.toggle。現在，如果您單擊X，它的動畫關閉，但不影響.toggle狀態。相反，讓X觸發點擊#menu-item-21，這樣它使用.toggle並影響切換狀態。