按钮需要单击两次（Jquery）

Question

背景：试图在一个页面站点上为移动设备构建一个全屏菜单。

问题：需要单击#handle div两次才能执行操作。我尝试过以不同的方式使用follows，但我似乎在某些方面实现错误：live/die、bind/unbind、on/off、delegate/Undelegate。

我不明白我该如何解决我的问题。很抱歉在一些Divs上出现了错误的ID名。

HTML

      <div id="overlay">
            <input type="checkbox" id="op"></input>

                <div class="overlay overlay-hugeinc">
                    <label for="op"></label>
                        <div id="nav">
                            <ul>
                                <li class="homescroll" class="overlayli">Home</li>
                                <li class="servscroll" class="overlayli">Services</li>
                                <li class="workscroll" class="overlayli">Work</li>
                                <li class="aboutscroll" class="overlayli">About</li>
                                <li class="contactscroll" class="overlayli">Contact</li>
                            </ul>
                        </div>
                </div>
      </div>

Jquery点击li时，用户将向下滚动页面，菜单将被隐藏：如果用户现在想再次打开菜单，则需要点击2次以执行操作。

<script>
     $(document).ready(function () {  
         $('li').hover(             
              function () {
                $('li', this).fadeIn();
              },
              function () {                 
                $('li', this).fadeOut();
              }
            );
        $(".aboutcroll").off().on('click', function() {

          $('html, body').animate({
                scrollTop: $("#aboutdummy").offset().top
            }, 800);                
            $("#overlay").hide();
            $("#handle").on('click'); 
        });
    });
</script>

单击#handle时,将打开覆盖全屏菜单：

<script>
    $(document).ready(function(){

        $("#handle").off().on('click', function() {
                $("#overlay").show();
        });
    });
</script>

Answer 1

问题似乎出在您正在使用的代码中的#handle onClick函数上

$("#handle").off().on('click', function() {
        $("#overlay").show();
});

Here.off（）在第一次单击时删除事件侦听器！尝试删除.off（）

同样对于滚动，您可以使用下面的代码（也没有.off（））

$("SELECTOR").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact").offset().top
    }, 500);
     return false;
});

希望这对你有用！如果没有，最好是通过jsFiddle或codePen共享代码。