Как правильно прописать код JS для меню?

Question

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

Answer 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>

Answer 2

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

$(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>

БЛОГ НА HUSL

Как правильно прописать код JS для меню?

Ответы (2 шт):