用于更改移动显示的 css 值的 Javascript

Question

我正在尝试让移动导航按钮从显示更改菜单显示:无；显示: block ；单击然后显示时: block ；显示:无；再次点击时。它可以从显示切换:无；显示: block ；但不是来自显示: block ；显示:无；

我对使用 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";
});
};

Answer 1

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

这是一个 working example .