Javascript更改移动显示的css值

我试图使一个移动导航按钮改变菜单显示从显示：无；显示：块；单击后再从显示：块；显示：无；当再次单击时。从显示切换到无工作；显示：块；但不是从显示：块；显示：无

我对使用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中隐藏和显示元素的正确方法是使用

.hide（）

和

.show（）

例如：

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

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

或者

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

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

---

或者可以使用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', '');
        }  
    });
});

---

这是一个例子

谢谢大家的回答，我一直在等待一封电子邮件提醒，说我有回复，但从未收到过回复，所以我今天早上向一位朋友寻求帮助，发现问题是我有两个单击功能，但只需要一个，下面是解决方法：

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;
 };
 });