Как заставить панель навигации исчезнуть, когда я нажимаю на тег ссылки из меню
У меня есть эта навигационная панель, она работает так, как я тоже хочу, но моя главная проблема в том, что я хочу, чтобы выпадающее меню исчезало, щелкая любые ссылки в меню, потому что я не уверен, что добавить в мой текущий код, чтобы заставить его вести себя так, как хотелось бы. Спасибо, любая помощь будет оценена
<nav id = "navbar">
<div class = "logo">
<a href = "#zero"><img src = "log.png"></a>
</div>
<ul>
<li><a href = "#lowerSec" class = "active">About</a></li>
<li><a href = "#container">Contact</a></li>
<li><a href = "#">Project</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>
Вот мой JS
Он отлично работает, я всего лишь одна дополнительная функция, которую я упомянул в заголовке, так как я не знаю, как это сделать.
<script type = "text/javascript">
$(window).on('scroll', function()
{
if ($(window).scrollTop())
{
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
}
)
$(document).ready(function() {
$(".menu").on("click", function() {
$("nav ul").toggleClass("active");
});
})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Потенциальным решением может быть стиль CSS. все теги отображаются в виде блоков, поэтому в файле CSS добавьте
.makeDisappear{
display:none
}
Хотя я рекомендую переименовать ваш идентификатор для вашей панели навигации во что-то более уникальное.
поэтому пример jQuery будет:
$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");
//or simply $("#navbar").addClass("makeDisappear")
})
чтобы ваша панель навигации снова появилась изменить display:none на display:block
Просто добавьте nav ul li a к функции щелчка. Поскольку я не знаю, как выглядит ваша разметка, вот краткая демонстрация:
$(".menu, nav ul li a").on("click", function(e) {
e.preventDefault();
$("nav ul").toggleClass("active");
});ul{
display:none;
}
ul.active{
display:block;
}<script
src = "https://code.jquery.com/jquery-3.3.1.min.js"
integrity = "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8 = "
crossorigin = "anonymous"></script>
<nav>
<button class = "menu">
Menu
</button>
<ul>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
</ul>
</nav>С помощью jquery вы можете разделять селекторы запятыми. Поскольку у вас уже есть функциональность для переключения активного класса, просто добавьте nav ul li a к существующей функции.
Я пробовал, но он ничего не делает для класса makeDisappear, какой тег мне дать?