Закрыть раскрывающееся меню при нажатии за его пределами ⇐ Jquery
Закрыть раскрывающееся меню при нажатии за его пределами
У меня возникла проблема с раскрывающимся меню навигации на моем сайте, которую я почти решил, но не могу полностью исправить. Я боюсь, что, возможно, только что испортил свой код.
Когда я представил функцию «прокрутки до привязки тегов» с событием PreventDefault, это сломало мое навигационное меню. Меню не закроется, если вы еще раз не нажмете кнопку меню. Наконец-то мне удалось закрыть его после того, как вы нажмете одну из ссылок, но теперь это единственный способ закрыть его. Как сделать так, чтобы оно закрывалось при нажатии на кнопку меню или где-нибудь еще на сайте? Я уверен, что виновата эта часть jQuery, но не знаю, как это исправить или обойти.
HTML для меню:
Домой О программе Услуги Работа Отзывы Контакт Блог И соответствующий jQuery:
// Когда пользователь нажимает кнопку, переключается между скрытием и отображением содержимого раскрывающегося списка. функция myFunction() { document.getElementById("myDropdown").classList.toggle("показать"); } //// Закроем раскрывающееся меню, если пользователь щелкнет за его пределами window.onclick = функция (событие) { if (!event.target.matches('.dropbtn')) { dropdowns.forEach(function (openDropdown) { dropdown.classList.contains('показать') && dropdown.classList.remove('показать'); }); } }; ////Это раздел, который я сделал для того, чтобы он закрывался после нажатия на ссылку jQuery(документ).ready(функция ($) { $('.dropbtn').on('click', function () { $(".dropdown-content").show(); }); $('.navlink').on('click', function () { $(".dropdown-content").hide(); }); }); Это потенциальная проблема, которая портит другие функции.
//Прокрутка до привязки тегов $(document).on('click', 'a:not(.external)', function (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); вернуть ложь; }); Что мне следует сделать, чтобы исправить свое меню?
Вы можете просмотреть сайт незавершенной работы по адресу http://idpdx.kreigd.com
Обновление: думаю, у меня есть подсказка, где что-то запутывается. Функция, которую я использую для добавления раскрывающегося списка, требует, чтобы класс "show" добавлялся после щелчка по элементу .dropbtn и удалялся при повторном щелчке по нему.
Поэтому мне действительно нужно переработать код, чтобы нажатие на .dropbtn открывало раскрывающийся список, а нажатие на что-либо еще, включая кнопки навигации и элемент .dropbtn, закрывало его.
Обновление 2. Пробуем другой метод. Не обращайте внимания на это первое обновление.
У меня возникла проблема с раскрывающимся меню навигации на моем сайте, которую я почти решил, но не могу полностью исправить. Я боюсь, что, возможно, только что испортил свой код.
Когда я представил функцию «прокрутки до привязки тегов» с событием PreventDefault, это сломало мое навигационное меню. Меню не закроется, если вы еще раз не нажмете кнопку меню. Наконец-то мне удалось закрыть его после того, как вы нажмете одну из ссылок, но теперь это единственный способ закрыть его. Как сделать так, чтобы оно закрывалось при нажатии на кнопку меню или где-нибудь еще на сайте? Я уверен, что виновата эта часть jQuery, но не знаю, как это исправить или обойти.
HTML для меню:
Домой О программе Услуги Работа Отзывы Контакт Блог И соответствующий jQuery:
// Когда пользователь нажимает кнопку, переключается между скрытием и отображением содержимого раскрывающегося списка. функция myFunction() { document.getElementById("myDropdown").classList.toggle("показать"); } //// Закроем раскрывающееся меню, если пользователь щелкнет за его пределами window.onclick = функция (событие) { if (!event.target.matches('.dropbtn')) { dropdowns.forEach(function (openDropdown) { dropdown.classList.contains('показать') && dropdown.classList.remove('показать'); }); } }; ////Это раздел, который я сделал для того, чтобы он закрывался после нажатия на ссылку jQuery(документ).ready(функция ($) { $('.dropbtn').on('click', function () { $(".dropdown-content").show(); }); $('.navlink').on('click', function () { $(".dropdown-content").hide(); }); }); Это потенциальная проблема, которая портит другие функции.
//Прокрутка до привязки тегов $(document).on('click', 'a:not(.external)', function (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); вернуть ложь; }); Что мне следует сделать, чтобы исправить свое меню?
Вы можете просмотреть сайт незавершенной работы по адресу http://idpdx.kreigd.com
Обновление: думаю, у меня есть подсказка, где что-то запутывается. Функция, которую я использую для добавления раскрывающегося списка, требует, чтобы класс "show" добавлялся после щелчка по элементу .dropbtn и удалялся при повторном щелчке по нему.
Поэтому мне действительно нужно переработать код, чтобы нажатие на .dropbtn открывало раскрывающийся список, а нажатие на что-либо еще, включая кнопки навигации и элемент .dropbtn, закрывало его.
Обновление 2. Пробуем другой метод. Не обращайте внимания на это первое обновление.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Открытое раскрывающееся меню не изменится, пока я не закрою раскрывающееся меню.
Anonymous » » в форуме Android - 0 Ответы
- 44 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Открытое раскрывающееся меню не изменится, пока я не закрою раскрывающееся меню.
Anonymous » » в форуме Android - 0 Ответы
- 36 Просмотры
-
Последнее сообщение Anonymous
-