本文详细介绍了如何利用javaScript创建一个按钮，实现网页侧边栏的显示与隐藏切换功能。通过获取按钮和侧边栏的dom元素，并监听按钮的点击事件，动态修改侧边栏的`display`样式属性，从而达到交互效果。文章还提供了完整的代码示例和最佳实践建议。
在现代网页设计中，侧边栏（Sidebar）常用于导航、工具集或辅助信息展示。为了优化用户体验和屏幕空间利用，实现一个可切换侧边栏的按钮变得尤为重要。本文将详细指导您如何使用纯javascript来创建这样一个功能，使侧边栏在点击按钮时能够平滑地显示或隐藏。
1. html 结构准备
首先，我们需要在HTML中定义侧边栏和用于切换其状态的按钮。确保这两个元素都具有唯一的 id 属性，以便JavaScript能够准确地定位它们。
<header class="header row "> <div class="d-flex justify-content-between"> <div id="logo" class="pb-2 ps-2 pe-0 col-2"> <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png"> <!-- 侧边栏切换按钮 --> <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle"> <i class="fa-solid fa-angle-left py-4 pe-2"></i> </a> </div> </div> </header> <div class="body row "> <!-- 侧边栏容器 --> <div class="sidebar col-2 " id="sidebar"> <!-- sidebar start --> <div class="navbar-nav w-100"> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a> <div class="dropdown-menu bg-transparent border-0"> <a href="#" class="dropdown-item">A</a> <a href="#" class="dropdown-item">B</a> <a href="#" class="dropdown-item">C</a> </div> </div> <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a> <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a> <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a> </div> <!-- sidebar end --> </div> <div class="content col-10"> Content </div> </div>
在上述代码中：
立即学习“Java免费学习笔记（深入）”；
- 我们有一个 <a> 标签作为切换按钮，其 id 为 menu-toggle。
- 侧边栏容器是一个 <div>，其 id 为 sidebar。
2. JavaScript 交互逻辑
接下来，我们将编写JavaScript代码来实现侧边栏的切换逻辑。核心思想是：当点击按钮时，检查侧边栏当前的显示状态，然后将其切换到相反的状态。
<script> // 获取切换按钮元素 const menuToggleButton = document.querySelector('#menu-toggle'); // 获取侧边栏元素 const sidebar = document.querySelector('#sidebar'); // 为按钮添加点击事件监听器 menuToggleButton.onclick = function(e) { // 阻止默认的链接行为，如果按钮是<a>标签 e.preventDefault(); // 检查侧边栏的当前显示样式 if (sidebar.style.display !== 'none') { // 如果不是隐藏状态，则将其隐藏 sidebar.style.display = 'none'; } else { // 如果是隐藏状态，则将其显示 sidebar.style.display = 'block'; } }; </script>
代码解析：
- document.querySelector(‘#menu-toggle’) 和 document.querySelector(‘#sidebar’) 用于通过 id 属性获取对应的DOM元素。
- menuToggleButton.onclick = function(e) { … } 为按钮添加了一个点击事件监听器。当按钮被点击时，function(e) 中的代码会被执行。
- e.preventDefault(); 是一个好习惯，特别是当切换按钮是 <a> 标签时，它会阻止浏览器执行链接的默认跳转行为。
- sidebar.style.display !== ‘none’ 检查侧边栏的 display 样式属性是否不等于 ‘none’。
- 根据检查结果，将 sidebar.style.display 设置为 ‘none’（隐藏）或 ‘block’（显示），从而实现侧边栏的切换。
3. 完整示例代码
为了让上述代码能够正常运行，您需要将JavaScript代码放置在HTML文件的 </body> 结束标签之前，以确保在脚本执行时，相关的DOM元素已经加载并可用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可切换侧边栏示例</title> <!-- 引入 bootstrap css (如果使用) --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- 引入 Font Awesome (如果使用) --> <script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script> <style> /* 简单的侧边栏样式，确保其可见性 */ .sidebar { background-color: #f8f9fa; border-right: 1px solid #dee2e6; height: 100vh; /* 示例：占满视口高度 */ padding-top: 20px; } .content { padding: 20px; } </style> </head> <body> <header class="header row "> <div class="d-flex justify-content-between"> <div id="logo" class="pb-2 ps-2 pe-0 col-2"> <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png" alt="Logo"> <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle"> <i class="fa-solid fa-angle-left py-4 pe-2"></i> </a> </div> </div> </header> <div class="body row "> <div class="sidebar col-2 " id="sidebar"> <!--sidebar start--> <div class="navbar-nav w-100"> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a> <div class="dropdown-menu bg-transparent border-0"> <a href="#" class="dropdown-item">A</a> <a href="#" class="dropdown-item">B</a> <a href="#" class="dropdown-item">C</a> </div> </div> <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a> <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a> <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a> <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a> </div> <!--sidebar end--> </div> <div class="content col-10"> Content </div> </div> <!-- 确保JavaScript在所有DOM元素加载后执行 --> <script> document.querySelector('#menu-toggle').onclick = function(e) { e.preventDefault(); // 阻止<a>标签的默认行为 var sidebar = document.querySelector('#sidebar'); if (sidebar.style.display !== 'none') { sidebar.style.display = 'none'; } else { sidebar.style.display = 'block'; } }; </script> <!-- 引入 Bootstrap JS (如果使用) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
4. 注意事项与最佳实践
-
脚本位置： 始终将您的JavaScript代码放在 </body> 结束标签之前。这样可以确保在脚本尝试访问DOM元素时，这些元素已经被浏览器完全解析和加载。
-
使用CSS类切换（推荐）： 直接操作 style.display 简单直观，但更专业的做法是利用CSS类来控制侧边栏的显示/隐藏状态。例如：
.sidebar { /* 默认显示样式 */ display: block; /* 其他样式 */ transition: all 0.3s ease; /* 添加过渡效果 */ } .sidebar.hidden { display: none; /* 或使用 transform/opacity 实现更平滑的动画 */ /* transform: translateX(-100%); */ /* opacity: 0; */ }然后JavaScript代码可以改为：
menuToggleButton.onclick = function(e) { e.preventDefault(); sidebar.classList.toggle('hidden'); // 切换 'hidden' 类 };这种方法有以下优点：
- 样式与行为分离： CSS负责外观，JavaScript负责行为。
- 动画和过渡： 结合CSS transition 属性，可以轻松实现平滑的显示/隐藏动画效果。
- 可维护性： 更容易管理和修改侧边栏的样式。
-
初始状态： 确保侧边栏的初始显示状态与您的设计一致。如果您希望侧边栏默认是隐藏的，可以在CSS中设置 display: none; 或添加 hidden 类。
-
可访问性 (accessibility)： 为了提高用户体验，特别是对于使用屏幕阅读器的用户，建议为切换按钮添加适当的ARIA属性：
<a href="#" class="sidebar-toggler" id="menu-toggle" aria-expanded="true" aria-controls="sidebar"> <i class="fa-solid fa-angle-left"></i> </a>
并在JavaScript中动态更新 aria-expanded 属性：
menuToggleButton.onclick = function(e) { e.preventDefault(); var sidebar = document.querySelector('#sidebar'); var isHidden = sidebar.style.display === 'none'; if (isHidden) { sidebar.style.display = 'block'; menuToggleButton.setAttribute('aria-expanded', 'true'); } else { sidebar.style.display = 'none'; menuToggleButton.setAttribute('aria-expanded', 'false'); } };aria-expanded 指示元素（如侧边栏）是否处于展开状态，aria-controls 指示按钮控制哪个元素。
总结
通过简单的HTML结构和几行JavaScript代码，我们就能轻松实现一个可切换的侧边栏功能。虽然直接操作 style.display 可以快速实现，但为了更好的可维护性、动画效果和可访问性，推荐使用CSS类来管理侧边栏的显示状态，并结合ARIA属性提升用户体验。掌握这些技术，将有助于您构建更具交互性和用户友好的网页应用。