由于平滑滚动，点击后无法切换 W3Schools 菜单 jquery

Question

对于一个简单的网站，我遵循了堆栈溢出上发布的 W3Schools tutorial about how to create a responsive hamburger menu. To close it, I found this 。

var topNav = document.querySelector('#myTopnav');
topNav.addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {
    topNav.classList.remove('responsive');
  }
});

但它似乎对我不起作用。我什至更改了我的网站以适应威胁中显示的示例的完全相同的结构。

现在我想通了，一旦我删除了平滑滚动的 jQuery 代码，它就起作用了。

$(document).ready(function() {
  $('nav a[href*=\#]').bind('click', function(s) {
    s.preventDefault(); 
    var target = $(this).attr("href"); 

    $('html, body').stop().animate({
      scrollTop: ( $(target).offset().top - 50 ) 
    }, 600, function() {
      location.hash = target;
    });

    return false;
  });
});

知道如何让它们并排工作吗？

Answer 1

~~正如 @bradbury9 在他对你的问题的评论中指出的那样，去掉 s.preventDefault() 确实解决了问题。~~ 看在以下代码段中：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

// var topNav = document.querySelector('#myTopnav');
// topNav.addEventListener('click', function(e) {
//   if (e.target.tagName === 'A') {
//     topNav.classList.remove('responsive');
//   }
// });


// PAY ATTENTION! I changed the selector from nav to div.topnav!
// This is only because the HTML in the snippet is structured this way!
$('div.topnav a[href*=\#]').on('click', function(s) {

  s.preventDefault();

  // EDIT: added line to "merge" the two functions,
  // so they don't block each other
  $("#myTopnav").removeClass("responsive");

  var target = $(this).attr("href");

  $('html, body').stop().animate({
    scrollTop: ($(target).offset().top - 50)
  }, 1000, function() {
    location.hash = target;
  });

  // return false;
});

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div id="news" style="padding-left:16px">
  <h2>Responsive Topnav Example: news</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div id="contact" style="padding-left:16px">
  <h2>Responsive Topnav Example: contact</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

在小屏幕上

出现汉堡包菜单，
点击打开
如果打开它会在下次点击时关闭
如果单击菜单项 (link)，菜单将关闭

问题是您将两个 click 事件绑定到同一个元素，同时处理这两个事件需要 bubbling/propagation。（当然这会导致 link "will work" 的问题，因为没有什么可以阻止它工作。）

另一种解决方案是，您可以从两个单独的函数中创建一个函数，因此只需单击一次。

编辑我编辑了代码片段，以显示应如何合并函数，还编辑了第一行，以显示那不是真正的答案。

由于平滑滚动，点击后无法切换 W3Schools 菜单 jquery

Toggle W3Schools menu after clicking not working, due to smooth scroll jquery

html

javascript

jquery

menu