Блог

Я пытаюсь заставить кнопку мобильной навигации изменять отображение меню с display: none; на display: block; при нажатии, а затем с display: block; на display: none; при повторном нажатии. Это работает, переключаясь с display: none; на display: block; но не с display: block; на display: none;

Я все еще относительно новичок в работе с javascript, я пытался поискать свой ответ (я чувствую, что он может быть где-то там), но если я не реализовывал какой-то другой код, который я нашел неправильным, я не смог заставить его функционировать. ниже приведена моя первоначальная попытка его кодирования. Спасибо за помощь

 var hidden = true;

if (hidden == true) {
   $('a.hamburger').click(function() {
    hidden = false;
    document.getElementById('navigation').style.display = "block";
    document.getElementById('header-menu').style.height = "370px";
    });
} else if (hidden != true) {
$('a.hamburger').click(function() {
    hidden = true;
    document.getElementById('navigation').style.display = "none";
    document.getElementById('header-menu').style.height = "78px";
});
};
  

Или вы могли бы использовать jQuery .toggle() . Кроме того, я не уверен, является ли по какой-то причине сознательным выбором смешивать ваш jQuery с vanilla JS, но вот чисто jQuery-решение:

 $(document).ready(function(){
    $('a.hamburger').click(function() {
        $('#navigation').toggle();
        if ($('#navigation').is(':visible')) {
            $('#header-menu').css('height', '370');
        } else {
           $('#header-menu').css('height', '');
        }  
    });
});
  

Вот рабочий пример.

Правильный способ скрыть и отобразить элемент в jquery — использовать .hide() и .show()

Пример:

 $('#id').hide(); 

$('#id').show();
  

Или альтернативно

 $("#id").css("display", "none");

$("#id").css("display", "block");
  

Спасибо, ребята, за ответы, я ждал оповещения по электронной почте о том, что у меня есть ответы, но я так и не получил ни одного, поэтому я попросил друга о помощи этим утром и выяснил, что проблема в том, что у меня было 2 функции щелчка, когда должна быть только одна, вот что получилось:

 var $isHidden = true;

$('a.hamburger').click(function() { 


     if ($isHidden == true){

    document.getElementById('navigation').style.display = "block";
    document.getElementById('header-menu').style.height = "370px";
    $isHidden = false;

} else {


    document.getElementById('navigation').style.display = "none";
    document.getElementById('header-menu').style.height = "78px";
    $isHidden = true;
 };
 });