0

我有一个功能可以在悬停时禁用第一次单击时的链接操作，然后在第二次单击时允许链接操作：

<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>

在第一次悬停时，该功能可以正常工作，但是如果我让该功能运行而无需单击，则将鼠标移出悬停元素，然后返回并再次“放下”菜单，如果在 .click 中停止工作。在控制台中，似乎 if 子句只是被直接循环。任何想法为什么？

4

2 回答 2

0

这是我自己的解决方案：

<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>

现在工作正常。

于 2013-07-11T15:30:25.953 回答
0 
<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>
于 2013-07-11T13:05:37.970 回答