Question

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

问题：需要点击#handle div 2次才能执行操作。我试图以不同的方式使用以下，但我似乎以某种方式实现它错误： 生活/死亡，绑定/解除绑定，开关， delegate / undelegate 。

我不明白我应该如何解决我的问题。对不起，某些div上的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();
});

这里 .off（）正在首次点击时删除事件监听器！尝试删除.off（）

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

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

希望这适合你！如果不是，那么如果你可以通过jsFiddle或CodePen共享你的代码会更好。

需要单击按钮两次（Jquery）

1 个答案: