Как скрыть меню при повторном клике jquery

110

10 августа 2019, 14:40

Имеется вот такой псевдокод, при клике он показывает моё меню, но я хочу что бы при повторном он его опять скрывал, как это можно сделать?

<script>
    $('.header-menu-icon').click(function (){
        $(".header-menu-link").css("display", "inline-block");
    });
</script>

Answer 1

Можно использовать переменную, которая будет изменяться при клике и по ней сверять, открыто ли меню.

let menuOpen = 0; 
 
$('.header-menu-icon').click(function() { 
  if(menuOpen == 0) { 
    menuOpen = 1; 
    $(".header-menu-link").css("display", "inline-block"); 
  } else if(menuOpen == 1) { 
    menuOpen = 0; 
    $(".header-menu-link").css("display", "none"); 
  } 
});

.header-menu-icon {display: block; width: 30px; height: 30px; background: gray; cursor: pointer;} 
.header-menu-link {display: none; width: 50px; height: 100px; background: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="header-menu-icon"></div> 
<div class="header-menu-link"></div>

Либо использовать классы (мне такой вариант больше нравится).

let menuOpen = 0; 
 
$('.header-menu-icon').click(function() { 
  let hasClass = $('.header-menu-link').hasClass('active'); 
  if(hasClass) 
    $('.header-menu-link').removeClass('active'); 
  else 
    $('.header-menu-link').addClass('active'); 
}); 
 
/* Либо использовать вот такой код 
$('.header-menu-icon').click(function() { 
  $('.header-menu-link').toggleClass('active'); 
}); 
*/

.header-menu-icon {display: block; width: 30px; height: 30px; background: gray; cursor: pointer;} 
.header-menu-link {display: none; width: 50px; height: 100px; background: red;} 
/* Добавим класс active */ 
.header-menu-link.active {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="header-menu-icon"></div> 
<div class="header-menu-link"></div>

Answer 2

Либо как-то так:

Думаю, что Вы сможете подогнать пример под свои нужды.

$('button').on('click', () => { 
  $('.foo').toggle(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="foo"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
  <li>4</li> 
</ul> 
<button>Toggle</button>