cssjs菜单栏展开收缩

基础概念

CSS（层叠样式表）和JS（JavaScript）是构建网页交互性的两个关键技术。CSS负责页面的样式和布局，而JS则负责页面的动态行为和交互逻辑。

菜单栏展开收缩是一种常见的网页交互效果，通常用于导航菜单。用户点击菜单栏时，菜单项会展开显示子菜单项，再次点击则收缩隐藏子菜单项。

类型

纯CSS实现：利用CSS的:hover伪类或CSS动画来实现菜单的展开和收缩。
JS实现：通过JavaScript监听点击事件，动态改变菜单的显示状态。
结合CSS和JS：使用CSS处理样式和动画，使用JS处理逻辑和交互。

应用场景

网站导航菜单
移动应用底部导航栏
侧边栏菜单

示例代码

纯CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Menu Toggle</title>
    <style>
        .menu {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .menu-item {
            position: relative;
        }
        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .menu-item:hover .sub-menu {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="menu-item">
            Home
        </li>
        <li class="menu-item">
            Products
            <ul class="sub-menu">
                <li>Product 1</li>
                <li>Product 2</li>
                <li>Product 3</li>
            </ul>
        </li>
        <li class="menu-item">
            About
        </li>
    </ul>
</body>
</html>

JS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Menu Toggle</title>
    <style>
        .menu {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .menu-item {
            position: relative;
        }
        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="menu-item">
            Home
        </li>
        <li class="menu-item" onclick="toggleSubMenu(this)">
            Products
            <ul class="sub-menu">
                <li>Product 1</li>
                <li>Product 2</li>
                <li>Product 3</li>
            </ul>
        </li>
        <li class="menu-item">
            About
        </li>
    </ul>

    <script>
        function toggleSubMenu(element) {
            const subMenu = element.querySelector('.sub-menu');
            if (subMenu.style.display === 'block') {
                subMenu.style.display = 'none';
            } else {
                subMenu.style.display = 'block';
            }
        }
    </script>
</body>
</html>

常见问题及解决方法

菜单展开后无法收缩：
- 原因：可能是JS逻辑错误，导致点击事件未正确触发。
- 解决方法：检查JS代码，确保点击事件监听器正确绑定，并且逻辑正确处理展开和收缩状态。

菜单在移动设备上显示不正常：
- 原因：可能是CSS媒体查询未正确设置，导致响应式设计失效。
- 解决方法：添加适当的媒体查询，确保在不同屏幕尺寸下菜单显示正常。
菜单展开动画效果不流畅：
- 原因：可能是CSS动画性能问题，或者浏览器渲染问题。
- 解决方法：优化CSS动画，减少不必要的重绘和回流，或者使用will-change属性提示浏览器提前优化。