0

подскажите пожалуйста как правильно прописать 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>

8
  • Подскажите что должно делать строка $(document).click(function(e) {...}? Вы на одни и те же элементы вешаете по два события
    – Greg--
    9 июл 2021 в 12:09
  • По клику на кнопку с классом "menu-click" должно открыть меню .header__menu 9 июл 2021 в 12:13
  • У вас по два события на ".header__menu", $(document) и судя по коду вы не совсем понимаете что вы делаете. Попробуйте написать на чистом js и не будет возникать вопросов таких, вы тогда поймете что означает $(function() {}); зачем так писать и когда так не желательно писать. Почему вы после строки var res = $(".header__menu"); пишите $('.header__menu').on('click',...) почему вы в одном месте используете .on в другом .click, jquery не рекомендует давно использовать .click это у них на сайте написано. Код собран с разных постов stackoverflow
    – Greg--
    9 июл 2021 в 12:13
  • 1
    @Макск может тестовое на собеседование или домашка))
    – Greg--
    9 июл 2021 в 12:44
  • 1
    Ну главное, чтобы человек разобрался, в итоге ) 9 июл 2021 в 12:46

2 ответа 2

1

Идея создать функцию которая с методами открыть и закрыть и вызывать открытие где угодно на странице

В качестве проверки открыто меню или закрыто я использую булевую переменную isOpened и при нажатии на кнопку вызываю метод .show() или .hide()

Запись
showHideMenu.isOpened?showHideMenu.hide():showHideMenu.show()
это сокращение от записи

if(showHideMenu.isOpened){
  showHideMenu.hide()
}else{
  showHideMenu.show()
}

Сокращение имеет вид (условие)?если истина:если ложь при этом такая запись обязательно должна содержать условие если ложь

let showHideMenu = {
  isOpened: false,
  menu: $(".header__menu"),
  show(){
    this.isOpened = true
    this.menu.fadeIn(300)
  },
  hide(){
    this.isOpened = false
    this.menu.fadeOut(300)
  }
}

$(".menu-click, .burger-click").on('click', ()=>{
  showHideMenu.isOpened?showHideMenu.hide():showHideMenu.show()
})
.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>

9
  • Кажись у вас ошибка в самом первом коде. И вместо if (isOpened ){ showHideMenu.show } else { showHideMenu.hide } можно использовать showHideMenu.toggle(isOpened). 9 июл 2021 в 13:20
  • Проверил код - ошибку не нашел, уточните пожалуйста. Если написать showHideMenu.toggle(isOpened) это вообще работать не будет, и нет в этой записи смысла. Переписать по аналогии с ответом HTO HOT можно, без css и скорее получится тоже в одну строку (как я предлагал в комментарии у HTO HOT), но я специально написал в виде функции, чтоб автор разбирался и смотрел что можно по-разному решать одну и ту же задачу.
    – Greg--
    9 июл 2021 в 13:47
  • "это сокращение от записи" и дальше кусочек кода. И почему же .toggle работать не будет? 9 июл 2021 в 14:15
  • Кхм.. Понял, что вы использовали не метод jQ для показа и скрытия. 9 июл 2021 в 14:33
  • укажите на ошибку, туплую. ...я пока писал понял что вы имели ввиду)) вот так будет работать:$(".header__menu").toggle() Только никак не получается сделать через .toggle( display ) и тогда код еще в два раза сократится)
    – Greg--
    9 июл 2021 в 14:41
0

Ну вот довольно простой код ,для новичка думаю сойдёт

$(document).ready(()=>{
    let $content = $('.header__menu');
    let $menuClick = $('.menu-click');
    let $burger = $('.burger-click');
    $content.on('click', function(e){e.stopPropagation() });
    $burger.on('click',menuToggle);
    $menuClick.on('click',menuToggle);
    function menuToggle(){
      $content.toggleClass('active');
    }
})
.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 {
  
  
  background: red;
  padding: 52px 18px;
  text-align: center;
  color: #fff;
  /*Вставил свой код*/
  visibility:hidden;
  opacity:0;
  transition:opacity 300ms, visibility 0ms 300ms;
}

/*Вставил свой код*/
.active.header__menu {
     transition:opacity 300ms, visibility 0ms 0ms;
     visibility:visible;
     opacity: 1;
}
<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>

1
  • А что делает эта строка: $content.on('click', function(e){e.stopPropagation() }); Вариант интересный но его можно было написать в одну строку: $(document).ready(()=>{$('.menu-click, .burger-click').on('click', ()=>{$('.header__menu').toggleClass('active') остальное не понимаю зачем нужно
    – Greg--
    9 июл 2021 в 12:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.