点击显示隐藏侧栏菜单js

要实现点击显示隐藏侧栏菜单的功能，可以使用JavaScript来控制侧栏菜单的显示与隐藏。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

DOM操作：JavaScript通过DOM（文档对象模型）来操作HTML元素。
事件监听：通过添加事件监听器来响应用户的点击操作。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧栏菜单示例</title>
    <style>
        #sidebar {
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0;
            left: -250px; /* 初始状态隐藏在屏幕左侧 */
            background-color: #333;
            transition: left 0.3s ease-in-out;
        }
        #sidebar ul {
            list-style-type: none;
            padding: 0;
        }
        #sidebar ul li {
            padding: 15px;
            color: white;
        }
        #toggleButton {
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="sidebar">
        <ul>
            <li>菜单项1</li>
            <li>菜单项2</li>
            <li>菜单项3</li>
        </ul>
    </div>
    <div id="toggleButton">显示/隐藏侧栏</div>

    <script>
        document.getElementById('toggleButton').addEventListener('click', function() {
            var sidebar = document.getElementById('sidebar');
            if (sidebar.style.left === '-250px') {
                sidebar.style.left = '0'; // 显示侧栏
            } else {
                sidebar.style.left = '-250px'; // 隐藏侧栏
            }
        });
    </script>
</body>
</html>