Переключение меню W3Schools после нажатия не работает, из-за плавной прокрутки JQuery

Question

Для простого веб-сайта я следовал учебнику W3Schools о том, как создать адаптивное меню для гамбургеров. Чтобы закрыть его, я нашел это простое решение , опубликованное при переполнении стека.

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>

На маленьких экранах

• появляется меню гамбургера,
• открывается при нажатии
• при открытии закрывается при следующем щелчке
• при нажатии на пункт меню (ссылку) меню закрывается

Проблема в том, что вы связываете два clickсобытия для одного и того же элемента, и для обработки обоих событий в одно и то же время необходимо всплытие / распространение.(Конечно, это приводит к тому, что ссылка «будет работать», поскольку ничто не мешает ей работать.)

Другое решение может заключаться в том, что вы создаете одну функцию из двух отдельных функций, поэтому только один щелчок

РЕДАКТИРОВАТЬ Я отредактировал фрагмент, чтобы он показывал, как должны быть объединены функции, а также отредактировал первую строку, чтобы показать, что это не был настоящий ответ.