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

问题：需要单击#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>