使用 e.preventDefault();防止点击 link 两次

Question

我正在尝试通过单击该面板中的 link 来关闭关闭的 canvas 导航面板。您可以 open/close 带有汉堡包按钮的面板，并在您单击页面上的任意位置时将其关闭。

参见：http://whyyouthinking.com/xindex.html#what

我已经到了可以正常工作的地步，但是汉堡包必须点击两次才能再次工作。

$(document).ready(function () {
  "use strict";
  $('.panel ul li a').on("click", function () {
     $('.menu-link').removeClass("active");
     $('.panel').animate({left: '-=250'});
  });
});

我已经解决了这个问题：

  $(document).ready(function () {
    "use strict";
    $('.panel ul li a').on("click", function () {
       $('.menu-link').removeClass("active");
       $('.panel').animate({left: '-=250'});
     });
    $('.panel ul li a').on('click', function(e) {
       e.preventDefault();
       $('.menu-link').click();         
    });
  });

现在我遇到的问题是 e.preventDefault();当您单击面板中的 link 时，也会停止我的 'scrollto' 功能。有没有办法只针对 .menu-link?

Answer 1

此处滚动到注册到“#menu”选择器的事件，因此当用户单击面板列表锚标记时，它滚动到目标偏移量，以及由于 $('.menu -link').click();.

因此将页面滚动动画限制为#menu 选择器。添加了#menu 选择器条件检查：if(target.selector != "#menu" && target.length)。

/*Scroll to function*/
$(function() {
    "use strict";
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.selector != "#menu" && target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 60
                }, 1000);
                return false;
            }
        }
    });
});

如果您取消注册#menu 选择器的事件会很好，请检查：$('a[href*="#"]:not([href="#"]):not([href="#menu"])').click(function(e) {...}

使用 e.preventDefault();防止点击 link 两次

Using e.preventDefault(); to prevent clicking a link twice

jquery

off-canvas-menu