使用JavaScript实现侧边栏切换功能-html教程-PHP中文网

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

聖光之護

发布： 2025-10-27 12:15:01

原创

798人浏览过

使用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">
      @@##@@
      <!-- 侧边栏切换按钮，通过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>

登录后复制

关键点：

切换按钮： 按钮被赋予了唯一的 id="menu-toggle"，这是JavaScript选择该元素的关键。
侧边栏容器：
侧边栏容器被赋予了唯一的 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>

登录后复制

代码解析：

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文件并在浏览器中打开。

weenCompany闻名企业网站系统5.3.0 中英文 GB2312

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3

查看详情

<!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">
      @@##@@
      <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添加或移除这个类。

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

登录后复制

这种方法的好处是：