Закрыть раскрывающееся меню при нажатии за его пределами ⇐ Jquery

[Anonymous]

У меня возникла проблема с раскрывающимся меню навигации на моем сайте, которую я почти решил, но не могу полностью исправить. Я беспокоюсь, что, возможно, только что напортачил свой код.

Когда я представил функцию «прокрутки до привязки тегов» с событием PreventDefault, это сломало мою навигационное меню. Меню не закроется, если вы еще раз не нажмете кнопку меню. Наконец-то мне удалось закрыть его после того, как вы нажмете одну из ссылок, но теперь это единственный способ закрыть его. Как сделать так, чтобы оно закрывалось при нажатии на кнопку меню или где-нибудь еще на сайте? Я уверен, что виноват этот фрагмент jQuery, но не знаю, как это исправить или обойти.

HTML для меню:

Код: Выделить всё

[i][/i]

[url=#home]Home[/url]
[url=#about]About[/url]
[url=#services]Services[/url]
[url=#work]Work[/url]
[url=#testimonials]Testimonials[/url]
[url=#contact]Contact[/url]
[url=http://blog.ignitiondesignpdx.com]Blog[/url]

И соответствующий jQuery:

Код: Выделить всё

// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
dropdowns.forEach(function (openDropdown) {
dropdown.classList.contains('show') && dropdown.classList.remove('show');
});
}
};

////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
$('.dropbtn').on('click', function () {
$(".dropdown-content").show();
});
$('.navlink').on('click', function () {
$(".dropdown-content").hide();
});
});

Это потенциальная проблема, которая портит работу других функций.

Код: Выделить всё

//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});

var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});

Что мне следует сделать, чтобы исправить свое меню?

Вы можете посмотреть на работу - сайт в разработке по адресу http://idpdx.kreigd.com

Обновление: думаю, у меня есть подсказка, где что-то запутывается. Функция, которую я использую для добавления раскрывающегося списка, требует, чтобы класс «show» добавлялся после щелчка по элементу .dropbtn и удалялся при повторном щелчке по нему.

Поэтому мне действительно нужно переработать код, чтобы нажатие на .dropbtn открывало раскрывающийся список, а нажатие на что-либо еще, включая кнопки навигации и элемент .dropbtn, закрывало его.
Обновление 2. Пробуем другой метод. Не обращайте внимания на это первое обновление.

Подробнее здесь: https://stackoverflow.com/questions/405 ... side-of-it