js控制导航栏隐藏显示

<nav id="navbar">
    <!-- 导航栏内容 -->
</nav>
<button id="toggleButton">切换导航栏</button>

document.getElementById('toggleButton').addEventListener('click', function() {
    var navbar = document.getElementById('navbar');
    if (navbar.style.display === 'none') {
        navbar.style.display = 'block'; // 或者 'flex' 如果使用 Flexbox 布局
    } else {
        navbar.style.display = 'none';
    }
});

#navbar {
    /* 初始样式 */
    display: block;
}

#navbar {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
#navbar.visible {
    visibility: visible;
    opacity: 1;
}

document.getElementById('toggleButton').addEventListener('click', function() {
    var navbar = document.getElementById('navbar');
    navbar.classList.toggle('visible');
});

window.onload = function() {
    document.getElementById('toggleButton').addEventListener('click', function() {
        var navbar = document.getElementById('navbar');
        if (navbar.style.display === 'none') {
            navbar.style.display = 'block';
        } else {
            navbar.style.display = 'none';
        }
    });
};