css js 折叠菜单栏

CSS和JavaScript都是现代Web页面中必不可少的技术，它们可以实现许多精美的功能和交互效果。其中一个非常实用的功能就是折叠菜单栏，它可以让页面更加紧凑，用户体验更加良好。

要实现折叠菜单栏，需要使用CSS和JavaScript两者的协作。首先通过CSS样式来定义菜单栏的样式，并创建一个按钮用于菜单的展开和折叠。下面是一个简单的CSS样式：

.menu {
    display: none;
}

.menu-btn {
    cursor: pointer;
}

.active {
    display: block;
}

上述代码定义了三个关键的CSS选择器：.menu、.menu-btn和.active。其中，.menu定义了菜单栏的默认样式，使用display:none将其隐藏。.menu-btn定义了一个按钮用于展开和折叠菜单栏。.menu-btn使用cursor:pointer样式表示该按钮可以点击。最后一个.active是用来定义展开菜单的样式，display:block表示菜单栏被展开并可见。

接下来，我们需要编写JavaScript代码，使得按钮可以进行菜单栏的展开和折叠。下面是JavaScript代码：

var menu = document.querySelector('.menu');
var menuBtn = document.querySelector('.menu-btn');

menuBtn.onclick = function() {
    if (menu.classList.contains('active')) {
        menu.classList.remove('active');
    } else {
        menu.classList.add('active');
    }
};

上述代码使用了querySelector方法获取页面上指定的元素，包括菜单栏和展开/折叠按钮。当点击按钮时，通过classList属性判断当前菜单栏是否处于展开状态，如果是则通过remove方法移除active样式，以折叠菜单栏。如果不是，则通过add方法添加active样式来展开菜单栏。

通过CSS和JavaScript的协作，我们可以实现一个简单而实用的折叠菜单栏，并使其拥有更强的交互性和用户体验。希望这篇文章对您有所帮助。