Question

我编写了这段代码，对Javascript和jQuery都很新，所以我很开心。基本上我已经缩小到单击链接时我的DIV框将在跟随链接之前执行fadeOut（）。我已经搜索了几天，并且无法转换回复或找到有效的回复。

我试图保持代码干净并添加一些CSS，以便人们可以看到它并根据给出的答案/解决方案对其进行修改。

//单击类“.exp”

的元素

$(document).ready(function() {
$(".exp").click(function() {
    $('.expMenuWrapper').fadeIn("fast");
    $('.expMenu').fadeIn("fast");
});

//这是我被抢购的地方，我借用了它并且它无法正常工作。它会在链接获得“动作”之前淡出

$(".close-btn, .expMenu").click(function(e) {
    e.preventDefault();
    $('.expMenuWrapper').fadeOut("fast");
});
});

Answer 1

preventDefault阻止了点击的默认行为。

我建议阅读this

所以，淡出＆amp;点击链接，您的代码应如下所示：

$(".close-btn, .expMenu").click(
   function(e) {
      $('.expMenuWrapper').fadeOut("fast");
   });
});

如果您希望父组件不接收点击事件，请使用stopPropagation。

如果要阻止任何其他侦听器被调用（即使在同一元素上），请使用stopImmediatePropagation。全部可在event object

上找到

Answer 2

使用preventDefault，您告诉浏览器不要做通常做的事情。您正在对菜单中的所有链接执行此操作。你应该只在关闭按钮上阻止，如下所示：

$(".close-btn").click(function(e) {
    e.preventDefault();
    $('.expMenuWrapper').fadeOut("fast");
});

编辑：按照Matyas的回答可能会引起一些不可预知的行为。关闭按钮是#的链接，因为它是href。不阻止默认会使屏幕跳到顶部（如果你向下滚动一下，你会突然跳到页面的顶部），并且会在你的网址中添加一个哈希值。这不是javascript的好用。如果您的“链接”实际上不是链接，请使用“预防”。