подскажите пожалуйста как правильно прописать js для меню? Есть две кнопки "Материалы"
и "Кнопка бургера"
, которая появляется только при мобильной версии. По клику на материалы, все прекрасно работает, но когда нажимаешь на бургер, меню открывается и пропадает. Как решить эту проблему? Код ниже
$(function() {
var res = $(".header__menu");
$(".menu-click").on("click", funk);
$(document).click(function(e) {
if (!$(e.target).hasClass('menu-click')) funk(false);
});
$('.header__menu').on('click', function(e) { e.stopPropagation() });
function funk(flag) {
if (res.css("display") == "none" && flag) {
res.fadeIn(300);
} else {
res.fadeOut(300);
}
}
});
$(function() {
var resS = $(".header__menu");
$(".burger-click").on("click", funkS);
$(document).click(function(e) {
if (!$(e.target).hasClass('burger-click')) funkS(false);
});
$('.header__menu').on('click', function(e) { e.stopPropagation() });
function funkS(flagS) {
if (resS.css("display") == "none" && flagS) {
resS.fadeIn(300);
} else {
res.fadeOut(300);
}
}
});
.container {
display: flex;
}
.header__list--item {
padding: 18px 32px;
background: blue;
color: #fff;
text-align: center;
cursor: pointer;
}
.burger-click {
padding: 18px 32px;
background: green;
color: #fff;
text-align: center;
cursor: pointer;
}
.header__menu {
display: none;
background: red;
padding: 52px 18px;
text-align: center;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header__list--item menu-click">Материалы</div>
<div class="header__list--item burger-click">Бургер</div>
</div>
<div class="header__menu">
Контетн
</div>
$(document).click(function(e) {...}
? Вы на одни и те же элементы вешаете по два события".header__menu"
,$(document)
и судя по коду вы не совсем понимаете что вы делаете. Попробуйте написать на чистом js и не будет возникать вопросов таких, вы тогда поймете что означает$(function() {});
зачем так писать и когда так не желательно писать. Почему вы после строкиvar res = $(".header__menu");
пишите$('.header__menu').on('click',...)
почему вы в одном месте используете.on
в другом.click
, jquery не рекомендует давно использовать.click
это у них на сайте написано. Код собран с разных постов stackoverflow