按钮需要单击两次（Jquery）

Question

背景：尝试在单页网站上为移动设备构建全屏菜单。

问题：#handle div 需要点击 2 次才能执行操作。我尝试以不同的方式使用以下内容，但我似乎以某种方式错误地实现了它： 生/死， 绑定/解除绑定， 开关， 委托/取消委托。

我不明白我应该如何解决我的问题。抱歉，某些 div 上的 id-name 错误。

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();
});

这里 .off() 在第一次点击时移除事件监听器！尝试删除 .off()

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

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

希望这对你有用！如果不是这样，如果您可以通过 jsFiddle 或 CodePen 共享您的代码会更好。