bootstrap+jquery+css折叠菜单收缩菜单效果（只有两级菜单）

最新推荐文章于 2026-05-24 10:00:46 发布

原创

最新推荐文章于 2026-05-24 10:00:46 发布 · 1.1w 阅读

标签

#bootstrap #侧边菜单 #折叠菜单 #收缩菜单

本文介绍如何使用Bootstrap、jQuery和CSS实现两级折叠菜单和收缩菜单的效果。内容包括菜单激活、二级菜单展开与折叠、菜单收缩等状态的展示。作者在尝试AdminLTE和layui后选择自定义菜单，以避免样式冲突和页面刷新问题。代码中还包含针对aHref的特殊处理和2018年8月的改进，如调整折叠图标显示及鼠标事件。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>侧边菜单test</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <style type="text/css">
    * {
      box-sizing: border-box !important;
    }

    div.container-fluid {}

    div.menuDiv {
      width: 230px;
      background: rgba(44, 59, 65, 1);
    }

    div.menuDiv ul.nav li a {
      text-decoration: none;
      cursor: pointer;
      border-left-width: 3px;
      border-left-style: solid;
      border-left-color: rgba(60, 141, 188, 0);
    }

    div.menuDiv ul.nav li a:link,
    div.menuDiv ul.nav li a:visited,
    div.menuDiv ul.nav li a:active {
      background: rgba(1, 1, 1, 0);
      color: rgba(184, 199, 206, 1);
    }

    div.menuDiv ul.nav li a:hover {
      background: rgba(30, 40, 44, 1);
      color: rgba(255, 255, 255, 1);
    }

    div.menuDiv ul.nav .icon-left {
      padding-right: 5px;
    }

    div.menuDiv ul.nav .icon-right {
      float: right;
      padding-top: 12px;
      padding-right: 10px;
    }

    div.menuDiv .nav-first {}

    div.menuDiv .nav-first>li {}

    div.menuDiv .nav-first>li>a {
      height: 40px;
      line-height: 40px;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 10px;
      margin: 0;
    }

    div.menuDiv .nav-first>li.active>a {
      background: rgba(30, 40, 44, 1) !important;
      color: rgba(255, 255, 255, 1) !important;
      border-left-color: rgba(60, 141, 188, 1);
    }

    div.menuDiv .nav-child {}

    div.menuDiv .nav-child>li {}

    div.menuDiv .nav-child>li>a {
      height: 30px;
      line-height: 30px;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 25px;
      margin: 0;
    }

    div.menuDiv .nav-child>li.borderLeft>a {
      border-left-color: rgba(60, 141, 188, 0.6);
    }

    div.menuDiv .nav-child>li.active>a {
      background: rgba(30, 40, 44, 1) !important;
      color: rgba(255, 255, 255, 1) !important;