jQuery的問題，懸停，單擊和if語句

Question

我有禁用徘徊時，首先點擊鏈接操作的功能，然後允許第二次點擊鏈接操作：

<script type="text/javascript"> 
    $('document').ready(function() { 

     $("#menu ul > li").hover(function() { 
      i = 1; 
      if ($('div', this).children().size() > 0) { 
       $('.drop', this).addClass("locked"); 
      } 

      $('.locked').click(function() { 
       if (i < 2) { 
        i++; 
        console.log("if 1 i = ", i); 
        return false; 
       } else { 
        i = 1; 
        console.log("if 2 i = ", i); 

       } 
      }); 

      clearTimeout($.data(this, 'timer')); 
      $('div', this).stop(true, true).delay(300).slideDown(200); 
     }, function() { 
      $.data(this, 'timer', setTimeout($.proxy(function() {}, this), 100)); 
      $('div', this).stop(true, true).slideUp(100); 
      $('.drop', this).removeClass("locked"); 
      i = 1; 

     }); 

    }); 
</script> 

在第一懸停功能工作正常，但如果我讓該功能在沒有點擊的情況下運行，請將鼠標移出懸浮元素，然後返回並再次「下拉」該菜單，if在.click中停止工作。在控制檯中，好像if子句直接循環顯示。 任何想法爲什麼？

Answer 1

這是我自己的解決方案：

<script type="text/javascript"> 

    $('document').ready(function() { 
    var drop_i = 1; 

       $("#menu ul > li").hover(function() { 

       if($('div', this).children().size() > 0){ 
       $('.drop', this).addClass("locked");          
       }     
       clearTimeout($.data(this, 'timer')); 
        $('div', this).stop(true, true).delay(300).slideDown(200); 
       },      
       function() { 
       $.data(this, 'timer', setTimeout($.proxy(function() { 
       }, this), 100)); 
       $('div', this).stop(true, true).slideUp(100); 
       $('.drop', this).removeClass("locked"); 


       }); 

       $('.drop').click(function(){ 
       console.log("clicked"); 
       if (drop_i < 2 && $('.drop').hasClass('locked')) {     
       drop_i++; 
       console.log("if 1 i = ", drop_i); 
       return false; 
       } 
       else { 
       drop_i = 1; 
       console.log("if 2 i = ", drop_i); 
       //return true; 
       }     
       });      


      }); 



     </script> 

作品OK了。

Answer 2

<script type="text/javascript"> 
    var i = 1;//yuo may want to re-name this since it is now global 
    $('document').ready(function() { 

     $("#menu ul > li").hover(function() { 
      i = 1; 
      if ($('div', this).children().size() > 0) { 
       $('.drop', this).addClass("locked"); 
      } 



      clearTimeout($.data(this, 'timer')); 
      $('div', this).stop(true, true).delay(300).slideDown(200); 
     }, function() { 
      $.data(this, 'timer', setTimeout($.proxy(function() {}, this), 100)); 
      $('div', this).stop(true, true).slideUp(100); 
      $('.drop', this).removeClass("locked"); 
      i = 1; 

     }); 

     $('.locked').click(function() { 
       if (i < 2) { 
        i++; 
        console.log("if 1 i = ", i); 
        return false; 
       } else { 
        i = 1; 
        console.log("if 2 i = ", i); 

       } 
      }); 

    }); 
</script>