首页 > web前端 > html教程 > 正文

使用JavaScript实现侧边栏切换功能

聖光之護
发布： 2025-10-27 12:15:01
原创
772人浏览过

使用JavaScript实现侧边栏切换功能

本文将详细指导如何创建一个按钮，通过javascript代码来控制网页侧边栏的显示与隐藏。我们将通过一个具体的html和javascript示例，展示如何获取dom元素、绑定事件监听器，并动态修改侧边栏的css display属性，从而实现流畅的用户交互体验。文章还将探讨优化方案，如使用css类进行切换以支持动画效果。

引言

在现代网页设计中，侧边栏（Sidebar）常用于提供导航菜单、工具集或辅助信息，对于优化用户体验和有效利用屏幕空间至关重要。实现侧边栏的显示与隐藏功能，即“切换”功能，是前端开发中的一个常见需求。通过一个简单的按钮，用户可以根据需要展开或收起侧边栏，从而在内容区域和导航之间灵活切换。本文将介绍如何使用纯JavaScript实现这一功能，并提供一个完整的示例。

HTML结构准备

首先，我们需要定义侧边栏和控制其显示/隐藏的按钮的HTML结构。在这个示例中，我们使用Bootstrap进行基本的布局。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<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">
      <!-- 侧边栏切换按钮，通过id="menu-toggle"进行标识 -->
      <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 ">
  <!-- 侧边栏容器，通过id="sidebar"进行标识 -->
  <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>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
登录后复制

关键点：

  • 切换按钮： <a id="menu-toggle" ...> 按钮被赋予了唯一的 id="menu-toggle"，这是JavaScript选择该元素的关键。
  • 侧边栏容器： <div id="sidebar" ...> 侧边栏容器被赋予了唯一的 id="sidebar"，以便JavaScript能够准确地操作它。
  • Bootstrap布局： col-2 和 col-10 类用于定义侧边栏和内容区域的宽度比例。

JavaScript实现侧边栏切换逻辑

核心逻辑是通过JavaScript监听按钮的点击事件，然后根据侧边栏当前的显示状态来切换其 display 样式属性。

立即学习“Java免费学习笔记（深入）”；

<script>
  document.querySelector('#menu-toggle').onclick = e => {
    // 获取侧边栏元素
    var sidebar = document.querySelector('#sidebar');
    // 检查侧边栏当前的display样式
    if (sidebar.style.display !== 'none') {
      // 如果不是隐藏状态，则将其设置为隐藏
      sidebar.style.display = 'none';
    } else {
      // 如果是隐藏状态，则将其设置为显示
      sidebar.style.display = 'block';
    }
  };
</script>
登录后复制

代码解析：

  1. document.querySelector('#menu-toggle')：通过ID选择器获取到侧边栏切换按钮元素。
  2. .onclick = e => { ... }：为按钮的 click 事件绑定一个事件处理函数。当按钮被点击时，该函数会被执行。
  3. var sidebar = document.querySelector('#sidebar');：在事件处理函数内部，获取到侧边栏元素。
  4. if (sidebar.style.display !== 'none')：判断侧边栏当前的 display 样式是否为 'none'。style.display 直接访问元素的内联样式。
  5. sidebar.style.display = 'none'; 或 sidebar.style.display = 'block';：根据判断结果，将侧边栏的 display 属性在 'none' 和 'block' 之间切换，从而实现隐藏和显示。

完整示例

将HTML结构和JavaScript代码整合，形成一个完整的可运行示例。请将以下代码保存为.html文件并在浏览器中打开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可切换侧边栏示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        /* 确保侧边栏初始状态可见或根据需求设置 */
        .sidebar {
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            min-height: calc(100vh - 56px); /* 假设header高56px */
        }
        .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>

<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
<script>
  // 确保DOM加载完成后再执行JavaScript
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#menu-toggle').onclick = e => {
      var sidebar = document.querySelector('#sidebar');
      if (sidebar.style.display !== 'none') {
        sidebar.style.display = 'none';
      } else {
        sidebar.style.display = 'block';
      }
    };
  });
</script>

</body>
</html>
登录后复制

优化与注意事项

虽然上述方法能够实现侧边栏的切换，但在实际开发中，有更推荐的优化方式来提升代码的可维护性、可扩展性和用户体验。

1. 使用CSS类进行切换 (推荐)

直接修改元素的 style.display 属性是一种快速实现方式，但它将样式逻辑硬编码到JavaScript中，不利于分离关注点。更推荐的做法是定义一个CSS类来控制侧边栏的隐藏状态，然后通过JavaScript添加或移除这个类。

ViiTor实时翻译
ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

ViiTor实时翻译 116
查看详情 ViiTor实时翻译

CSS示例：

/* 默认侧边栏样式 */
.sidebar {
    /* ... 其他样式 ... */
    transition: all 0.3s ease-in-out; /* 为平滑过渡添加动画 */
}

/* 隐藏状态的侧边栏样式 */
.sidebar.hidden {
    display: none;
    /* 或者使用 transform 实现更平滑的动画效果 */
    /* transform: translateX(-100%); */
    /* width: 0; opacity: 0; */
}

/* 针对 transform 隐藏的布局调整 */
.body.collapsed .content {
    margin-left: 0; /* 如果侧边栏完全收起，内容区占据全部宽度 */
    width: 100%;
}
登录后复制

JavaScript示例 (使用 classList.toggle):

document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('#menu-toggle');
  const sidebar = document.querySelector('#sidebar');
  const body = document.querySelector('.body'); // 如果需要调整body的布局

  menuToggle.onclick = e => {
    sidebar.classList.toggle('hidden'); // 切换 'hidden' 类
    // 如果需要联动调整内容区布局，可以切换body的类
    // body.classList.toggle('collapsed');
  };
});
登录后复制

这种方法的好处是：

  • 样式与行为分离： CSS负责样式，JavaScript负责行为。
  • 易于维护： 隐藏/显示逻辑集中在CSS中。
  • 支持动画： 结合CSS transition 属性，可以轻松实现侧边栏展开和收起的平滑动画效果，而直接修改 display 属性通常会导致瞬间切换，没有过渡效果。

2. DOM加载时机

确保JavaScript代码在HTML元素加载完成后执行。将 <script> 标签放在 </body> 结束标签之前，或者使用 DOMContentLoaded 事件监听器，都是确保这一点的有效方法。在上述完整示例中，我们已经采用了 DOMContentLoaded。

3. 可访问性 (ARIA)

为了提升屏幕阅读器用户的体验，建议为切换按钮添加ARIA属性，例如 aria-expanded。

<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle" aria-expanded="true">
  <i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
登录后复制

在JavaScript中，根据侧边栏的显示状态更新 aria-expanded 的值：

document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('#menu-toggle');
  const sidebar = document.querySelector('#sidebar');

  // 初始状态设置
  let isSidebarVisible = true; // 假设侧边栏默认可见
  menuToggle.setAttribute('aria-expanded', isSidebarVisible);

  menuToggle.onclick = e => {
    sidebar.classList.toggle('hidden');
    isSidebarVisible = !isSidebarVisible;
    menuToggle.setAttribute('aria-expanded', isSidebarVisible);
  };
});
登录后复制

当侧边栏可见时，aria-expanded 应为 true；当侧边栏隐藏时，应为 false。

总结

通过本文，我们学习了如何使用纯JavaScript创建一个简单的按钮来切换侧边栏的显示与隐藏。从直接修改 display 属性到更推荐的通过CSS类实现切换，我们了解了不同的实现方式及其优缺点。在实际项目中，采用CSS类结合 transition 属性的方法，能够带来更佳的用户体验和代码可维护性。同时，不应忽视DOM加载时机和可访问性等重要考量，以构建健壮且用户友好的Web界面。

以上就是使用JavaScript实现侧边栏切换功能的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css javascript java html js 前端 bootstrap go npm 编码 浏览器 工具 JavaScript css bootstrap html if var 事件 dom 选择器 display transition

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Dash 应用中动态设置超链接（href）属性指南 下一篇：怎么用HTML插入进度条_HTML progress标签与自定义样式美化方案
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html代码怎么显示_html元素显示控制方法与visibility属性详解 1、visibility:hidden隐藏元素但占位，display:none彻底移除且不占空间，opacity:0使元素透明但仍可交互，通过JavaScript切换CSS类或使用hidden属性也可控制显示状态。
2025-11-05 09:33:02
461
html动画如何翻转_HTML元素翻转（CSS transform/rotateY）动画方法 可通过CSStransform属性实现HTML元素翻转动画。一、使用rotateY实现水平翻转，结合transition添加过渡效果，hover时应用rotateY(180deg)并设置transform-style:preserve-3d保持3D空间。二、利用backface-visibility:hidden隐藏背面，实现卡片双面翻转，避免内容重叠。三、通过@keyframes定义从rotateY(0)到rotateY(360deg)的动画，绑定animation属性实现自动循环翻转，可调整
2025-11-05 09:25:02
636
html代码如何建站_HTML代码搭建网站全流程与部署方法 用HTML建站需先规划结构，编写页面代码，添加样式与交互，本地测试后通过GitHubPages免费部署上线。1.创建包含首页、关于页等的HTML文件；2.使用文本编辑器编写标准HTML结构并引入CSS；3.添加style.css和script.js提升美观与功能；4.浏览器打开index.html检查链接、图片加载及响应式效果；5.将文件推送至yourname.github.io仓库主分支；6.访问生成的网址即可查看网站。后续可优化视觉、统计访问量或绑定自定义域名。核心是结构清晰、内容完整、部署
2025-11-05 09:23:02
657
解决CSS @media 查询优先级与规则覆盖问题的教程 本文旨在解决@media查询在响应式设计中样式不生效的问题。通过分析CSS层叠规则和样式声明顺序，我们将深入探讨为何在特定屏幕尺寸下，媒体查询内的样式可能被外部样式覆盖。教程将提供具体代码示例，并强调正确的CSS组织方式，以确保响应式样式能按预期生效，避免常见的优先级陷阱。
2025-11-05 08:46:16
184
下拉列表怎么判断html5_HTML5下拉列表特性检测与兼容方案 答案：通过特性检测判断浏览器对datalist支持情况，并结合JavaScript模拟或polyfill实现兼容。首先使用‘options’indocument.createElement(‘datalist’)检测是否支持，若不支持则初始化自定义自动补全功能，确保下拉建议在各浏览器中可用。
2025-11-05 08:45:02
519
html代码怎么添加表格_html表格标签写法与表格布局方法说明 使用HTML表格可有效展示行列数据，通过定义表格，创建行，和分别定义表头与数据单元格；结合添加标题，、、划分结构以提升语义化；利用colspan和rowspan实现单元格合并；最后通过CSS设置边框、对齐、背景色和内边距美化样式。
2025-11-05 08:33:15
835
如何编辑网页HTML响应式设计_如何编辑网页HTML实现响应式布局 添加视口元标签使页面适配移动设备；2.使用百分比或Flexbox实现弹性布局；3.通过媒体查询为不同屏幕设置断点；4.采用rem、em等相对单位提升自适应能力；5.设置图片max-width与srcset确保响应式显示。
2025-11-05 08:13:02
964
pdf如何转成html_PDF文档转HTML（工具/在线转换）方法 答案：提供四种PDF转HTML方法。一、在线工具如Smallpdf，上传文件后选择HTML格式转换并下载；二、桌面软件如AdobeAcrobatPro，导入PDF后导出为HTML并设置选项；三、命令行工具pdf2htmlEX，安装后通过终端执行带参数的转换命令；四、编程方式使用Python库，安装环境与相关库后编写脚本提取PDF内容并生成HTML文件。
2025-11-05 06:35:18
325
为什么HTML插入背景图不铺满_HTML背景图CSS属性设置 背景图不铺满是因CSS属性设置不当，需正确配置background-size、repeat和position；使用background-size:cover、no-repeat和center可实现完整铺满效果。
2025-11-05 02:29:25
541
html中如何填充_HTML表单/元素（input/textarea）内容填充方法 使用HTML的value和text属性可预填input和textarea内容；2.通过JavaScript动态设置元素value实现运行时填充；3.结合模板引擎或前端框架进行数据绑定；4.利用reset()或赋空值清空或重置表单。
2025-11-04 23:59:02
637
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部