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

程序猿 • 2025年12月23日 04:59:40 • 用户投稿

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

引言

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

HTML结构准备

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

            @@##@@                              
  
                          Admin                  A          B          C        
      
      Cập nhật PO      Phân loại PO      Ước tính rebate      Cập nhật rebate      Báo cáo      Tra cứu thông tin      Hướng dẫn sử dụng    
      
   Content

关键点：

切换按钮： 按钮被赋予了唯一的 id=”menu-toggle”，这是JavaScript选择该元素的关键。侧边栏容器：

侧边栏容器被赋予了唯一的 id=”sidebar”，以便JavaScript能够准确地操作它。Bootstrap布局： col-2 和 col-10 类用于定义侧边栏和内容区域的宽度比例。

JavaScript实现侧边栏切换逻辑

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

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

  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';    }  };

代码解析：

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

完整示例

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

            可切换侧边栏示例                /* 确保侧边栏初始状态可见或根据需求设置 */        .sidebar {            background-color: #f8f9fa;            border-right: 1px solid #dee2e6;            min-height: calc(100vh - 56px); /* 假设header高56px */        }        .content {            padding: 20px;        }                @@##@@                        
  
                        Admin                  A          B          C        
      
      Cập nhật PO      Phân loại PO      Ước tính rebate      Cập nhật rebate      Báo cáo      Tra cứu thông tin      Hướng dẫn sử dụng    
      
   Content  
  // 确保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';      }    };  });

优化与注意事项

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

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

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

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元素加载完成后执行。将标签放在

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589299.html

bootstrap css go html java javascript js npm ss 前端工具浏览器编码

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

怎么用HTML插入进度条_HTML progress标签与自定义样式美化方案

上一篇 2025年12月23日 04:59:35

Dash 应用中动态设置超链接（href）属性指南

下一篇 2025年12月23日 04:59:45

如何使用Scikit-learn训练AI大模型？传统机器学习与深度结合

Scikit-learn在大型模型预处理中的核心作用是提供数据清洗、特征缩放、编码和降维等工具，确保输入数据高质量且规范化，为深度学习模型奠定坚实基础。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 说实话，如果你的目标是纯粹地“训练AI大…

程序猿
2026年9月21日 • 用户投稿
7000
用户投稿

win11复制大文件时速度突然掉到0怎么办_win11大文件复制速度突然掉0解决方法

传输速度降为0可尝试Robocopy命令、修复磁盘错误、更新驱动、关闭占用程序或格式化为NTFS。首先使用Robocopy无缓冲复制避免卡顿；其次通过chkdsk扫描修复文件系统错误；接着在设备管理器中更新USB与存储控制器驱动；然后通过任务管理器关闭高磁盘占用的后台进程；最后若目标盘为FAT32/…

程序猿
2026年9月21日
1000
用户投稿

Java Collections.sort与Collections.reverse的使用区别

Collections.sort用于排序，基于元素值比较，结果有序，默认升序，可自定义规则；2. Collections.reverse仅反转列表顺序，不比较元素，时间复杂度O(n)；3. 两者功能不同，不可替代，按需选择使用。 Java 中 Collections.sort 和 Collectio…

程序猿
2026年9月21日
1000
用户投稿

MediBangPaint中AI生成图片如何导出？快速保存图像的详细方法

答案：导出AI生成图片应优先选择PNG格式以保留细节和色彩。通过“文件”菜单中的“导出（单层）”功能，可将图像保存为PNG或JPG等格式，其中PNG为无损压缩，适合高质量输出；若需透明背景或后续编辑，更应选用PNG。清晰度不足常因原始分辨率低、过度放大或JPG压缩过度所致，建议导出时设置高质量（80…

程序猿
2026年9月21日
2000
用户投稿

Bun 1.3 正式发布

2025年10月10日，高性能 javascript 运行时 bun 发布了 1.3 版本。这是 bun 项目迄今为止最重大的版本更新，标志着 bun 从单纯的运行时工具演变为一个功能完备的全栈 javascript 开发平台。从运行时到全栈平台的跨越 Bun 1.3 的核心突破在于将前端开发能力…

程序猿
2026年9月21日
0000
用户投稿

Java中多态的基本实现方法

多态允许同一接口调用不同实现，通过继承与方法重写实现。1. 子类重写父类方法，如Animal的makeSound被Dog和Cat重写；2. 父类引用指向子类对象，运行时动态绑定，如Animal myPet = new Dog()调用Woof；3. 方法参数使用父类类型，提升代码复用，如playWit…

程序猿
2026年9月21日
0000
用户投稿

win10夜灯模式是灰色的打不开怎么办_win10夜灯模式无法启用解决方法

首先重新安装显卡驱动，其次通过注册表修改修复功能状态，最后执行系统文件检查与修复，可解决夜灯模式开关灰色无法启用的问题。如果您在尝试开启Windows 10的夜灯模式时，发现其开关呈现灰色且无法点击激活，这通常意味着系统底层服务或驱动程序存在问题，导致该功能被禁用。以下是几种有效的解决方法。本文…

程序猿
2026年9月21日
1000
MySQL字段注释快速补全方法_Sublime脚本自动生成标准文档结构

要快速补全mysql字段注释，可通过sublime text编写python脚本实现自动化；1. 脚本获取表名，可手动输入或从当前sql文件解析；2. 通过subprocess调用mysql命令行获取show full columns信息；3. 解析输出内容，提取字段名和现有注释；4. 生成alte…

程序猿
2026年9月21日 • 用户投稿
1000
用户投稿

iPhone13pro系列如何开启自动微距

要使用iPhone 13 Pro系列的自动微距功能，首先需确保设备系统已升级至最新版本。系统更新通常包含功能优化与性能提升，有助于更稳定地支持自动微距拍摄。开启该功能非常简单，无需手动设置。当你打开相机应用并靠近拍摄对象时，设备会智能识别距离，并自动切换至微距模式。此时，屏幕上将显示一朵小花图标，…

程序猿
2026年9月21日
0000
用户投稿

更偏向移动端？Steam新版商店页引国外玩家批评

今日，v社正式上线全新版本的steam商店界面，标志着此前长期测试的新设计终于全面启用。新版首页在视觉上更加开阔、简洁，将原先位于左侧的游戏分类菜单与顶部的蓝色导航栏整合为统一的顶部导航条，支持用户直接浏览竞速、潜行等具体游戏类型，并结合用户偏好实现个性化内容推荐。整体布局更贴近移动端操作逻辑，页面…

程序猿
2026年9月21日
0000
用户投稿

safari浏览器如何设置链接在新窗口而不是新标签页打开_safari浏览器链接新窗口打开设置

通过快捷键或第三方扩展可实现Safari中链接在新窗口打开：1. 按住Command键点击链接可临时在新窗口打开；2. 使用AppleScript脚本通过“自动操作”创建快速操作以新建Safari窗口；3. 网站自身代码如window.open()会强制新窗口打开；4. 安装可信扩展如“Link i…

程序猿
2026年9月21日
0000
用户投稿

PHP三元运算符HTML输出_PHP三元运算符HTML内容输出

PHP三元运算符用于在HTML中简洁输出条件内容，基本语法为“条件 ? 值1 : 值2”；2. 常用于动态显示文本、属性或样式，如根据$active输出“启用”或“禁用”；3. 可嵌入HTML标签设置class、disabled等属性，示例中根据登录状态显示不同按钮。 PHP三元运算符用于在HTML…

程序猿
2026年9月21日
2000
用户投稿

Hibernate Search嵌入式对象索引策略与常见问题解决

本文探讨了在使用Hibernate Search对关联或嵌入式对象进行索引时遇到的常见问题，特别是@IndexedEmbedded与includePaths属性的结合使用。通过分析HSEARCH000216错误，揭示了嵌入式对象属性需要显式@Field注解才能被主实体索引的机制，并提供了具体的代码示…

程序猿
2026年9月21日
1000
用户投稿

Ubuntu安装Python3.6并切换到3.6版本「建议收藏」

大家好，很高兴再次与你们见面，我是你们的好朋友全栈君。文章目录前言==补充==1 了解系统中已安装的Python版本2 安装Python 3.63 从Python 2.7切换到Python 3.64 中间遇到的问题4.1 问题一4.2 问题二总结参考文献前言本文记录我在Ubuntu 16.04…

程序猿
2026年9月21日
0000
用户投稿

在Java中如何实现对象的唯一标识

答案：Java中实现对象唯一标识主要有四种方式：1. 使用UUID生成全局唯一ID，适用于无数据库或分布式场景；2. 利用数据库自增主键，通过JPA的@Id和@GeneratedValue实现持久化唯一性；3. 重写equals与hashCode方法，基于不可变业务字段保证逻辑唯一；4. 采用Sno…

程序猿
2026年9月21日
0000
用户投稿

windows提示找不到nvidia控制面板怎么办_找不到nvidia控制面板的解决教程

首先检查NVIDIA驱动是否正常安装，确认设备管理器中显卡无异常；随后通过官方驱动包重新安装并勾选控制面板组件；确保NVIDIA相关服务已设为自动启动且正在运行；删除旧配置文件让系统重建；最后可尝试以管理员身份运行nvcplui.exe强制启动控制面板。如果您尝试打开NVIDIA控制面板时，系统提…

程序猿
2026年9月21日
2000
用户投稿

google浏览器提示“DNS_PROBE_FINISHED_NXDOMAIN”怎么处理_google浏览器DNS_PROBE_FINISHED_NXDOMAIN解决方法

首先清除DNS缓存并刷新网络配置，再检查hosts文件和更换公共DNS，最后重置Chrome设置与网络协议栈以解决域名解析失败问题。如果您在使用Google Chrome浏览器访问某个网站时，遇到“DNS_PROBE_FINISHED_NXDOMAIN”错误提示，这通常意味着浏览器已完成DNS探测…

程序猿
2026年9月21日
0000
用户投稿

VSCode怎么手动保存代码_VSCode禁用自动保存与手动保存设置教程

手动保存代码只需按Ctrl + S（Windows/Linux）或Cmd + S（macOS），可通过设置将“files.autoSave”设为“off”来禁用自动保存，并结合版本控制保障代码安全。 VSCode手动保存代码其实很简单，默认情况下，按下 Ctrl + S (Windows/Linux…

程序猿
2026年9月21日
2000
如何解决Linux软件包冲突依赖问题处理方案

遇到linux系统中软件包冲突或依赖问题时，应首先理解依赖关系并使用合适工具解决。1. 使用apt或yum的自动修复功能，如debian/ubuntu可用sudo apt –fix-broken install，centos/fedora可用sudo dnf install @syste…

程序猿
2026年9月21日 • 用户投稿
8000
用户投稿

VSCode语言特性贡献点配置

通过配置package.json中的contributes字段可实现VSCode语言扩展，依次需设置语法高亮（grammars）、语言绑定（languages）、激活事件（activationEvents）及语言服务器功能（如补全、跳转），并定义language-configuration.json…

程序猿
2026年9月21日
0000