JQuery при отображении изменения клика
Привет, ребята, я новичок и хочу приготовить гамбургер-меню. Я уже сделал гамбургер, но когда я хочу, чтобы мой jquery работал, ничего не происходит. Может ли кто-нибудь взглянуть на мой код и сказать, что не так?
<script
src = "https://code.jquery.com/jquery-3.3.1.js"
integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
crossorigin = "anonymous">
$("#burger-menu").on("click",function(){
$(".show").css("display","block")
});
</script>
и мой HTML
<nav>
<div class = "nav-wrapper">
<div id = "burger-menu">
<img src = "img/icons/burger-menu.png" class = "menu-burger">
</div>
<ul>
<li class = "show"><a href = "#">Home</a></li>
<li class = "show"><a href = "#">About</a></li>
<li class = "show"><a href = "#">Contact</a></li>
<div id = "logo"><img src = "logo.png"></div>
<li class = "show"><a href = "#">Gallery</a></li>
<li class = "show"><a href = "#">Menu</a></li>
<li class = "show"><a href = "#">Other</a></li>
</ul>
</div>
</nav>
и я хочу щелкнуть по «меню бургеров», чтобы изменить стиль «шоу» класса, который display: none для отображения: block
Обновлено: Я также хотел бы как-то переключить эти классы. Я имею в виду, что когда я нажимаю на этот гамбургер, "ul" примет display: block, но когда я снова щелкну, это будет отображаться: none
Я сделал и все так же :(
Ответы 4
Выберите элемент ul, содержащий класс show, и toggle() его отображение следующим образом:
$("#burger-menu").on("click", function() {
$("ul:has(.show)").toggle();
});
Спасибо за ваш ответ и время, я очень ценю это :)
Вы, наверное, не обращаете внимания на свой контейнер. Вы можете работать из контейнера ul, а не с отдельными пунктами меню.
Так что дайте идентификатор
<ul>
нравиться
<ul id = "menu_container">
В вашем CSS вы хотите, чтобы он начинался скрытым, поэтому
#menu_container { display: none; }
Тогда в вашем JS вы сможете просто использовать функцию переключения
$( document ).ready(function() {
$("#burger-menu").on("click",function(){
$("#menu_container").toggle();
});
});
Спасибо за ваш ответ и время, я очень ценю это :)
Вы не можете ожидать, что этот код будет выполнен после выполнения src. Переместите свои функции в другой элемент скрипта (лучше перед закрывающим тегом тела).
Что касается вашего вопроса, это должно сработать:
<script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "crossorigin = "anonymous"></script>
<script>
$( document ).ready(function() {
$("#burger-menu").on("click",function(){
$("#menu_container").toggle();
});
});
</script>
Удачи!
или используйте идиому о готовности документа: $ (document) .ready (function () {// Вызван обработчик для .ready ().});
Если вы используете элемент, e.preventDefault() необходим, если ваша страница не будет обновляться.
$("#dropdownHead").on("click",function (e) {
$("#dropdownMenu").toggle();
e.preventDefault();
});
Используйте методы jQuery show (), hide () или toggle ().