Bootstrap可折叠分组侧边导航菜单代码分享
本文主要和大家介绍Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下，希望能帮助到大家。
【相关视频推荐：Bootstrap教程】
效果图：
源码：
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>表格</title>
<meta name="keywords" content="侧边导航菜单(可分组折叠)">
<meta name="description" content="侧边导航菜单(可分组折叠)" />
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
<!-- Bootstrap3.3.5 CSS -->
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.panel-group{max-height:770px;overflow: auto;}
.leftMenu{margin:10px;margin-top:5px;}
.leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
.leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
.leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
.leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
</style>
</head>
<body>
<p class="row">
<p class="col-md-2">
<p class="panel-group table-responsive" role="tablist">
<p class="panel panel-primary leftMenu">
<!-- 利用data-target指定要折叠的分组列表 -->
<p class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
<h4 class="panel-title">
分组1
<span class="glyphicon glyphicon-chevron-up right"></span>
</h4>
</p>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<p id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<!-- 利用data-target指定URL -->
<button class="menu-item-left" data-target="test2.html">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
</button>
</li>
</ul>
</p>
</p><!--panel end-->
<p class="panel panel-primary leftMenu">
<p class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
<h4 class="panel-title">
分组2
<span class="glyphicon glyphicon-chevron-down right"></span>
</h4>
</p>
<p id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
<ul class="list-group">
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
</button>
</li>
</ul>
</p>
</p>
</p>
</p>
<p class="col-md-10">
内容
</p>
</p>
<!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js "></script>
<!-- Include all compiled plugins (below), or include inpidual files as needed -->
<script src="js/bootstrap.min.js "></script>
<script>
$(function(){
$(".panel-heading").click(function(e){
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});
</script>
</body>
</html>相关推荐：
jQuery实现气球弹出框式的侧边导航菜单效果_jquery
以上是Bootstrap可折叠分组侧边导航菜单代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
bootstrap怎么引入Eclipse
Apr 05, 2024 am 02:30 AM
通过以下五步在 Eclipse 中引入 Bootstrap：下载 Bootstrap 文件并解压缩。导入 Bootstrap 文件夹到项目中。添加 Bootstrap 依赖项。在 HTML 文件中加载 Bootstrap CSS 和 JS。开始使用 Bootstrap 增强用户界面。
bootstrap怎么引入idea
Apr 05, 2024 am 02:33 AM
在 IntelliJ IDEA 中引入 Bootstrap 的步骤：创建新项目并选择 "Web Application"。添加 "Bootstrap" Maven 依赖项。创建 HTML 文件并添加 Bootstrap 引用。替换为 Bootstrap CSS 文件的实际路径。运行 HTML 文件以使用 Bootstrap 样式。提示：可使用 CDN 引入 Bootstrap 或自定义 HTML 文件模板。
bootstrap中介效应检验结果怎么看stata
Apr 05, 2024 am 01:48 AM
Bootstrap中介效应检验在Stata中的解读步骤：检查系数符号：确定中介效应的正负向。检验p值：小于0.05表示中介效应显着。检查置信区间：不包含零表明中介效应显着。比较中值p值：小于0.05进一步支持中介效应的显着性。
大模型一对一战斗75万轮，GPT-4夺冠，Llama 3位列第五
Apr 23, 2024 pm 03:28 PM
关于Llama3，又有测试结果新鲜出炉——大模型评测社区LMSYS发布了一份大模型排行榜单，Llama3位列第五，英文单项与GPT-4并列第一。图片不同于其他Benchmark，这份榜单的依据是模型一对一battle，由全网测评者自行命题并打分。最终，Llama3取得了榜单中的第五名，排在前面的是GPT-4的三个不同版本，以及Claude3超大杯Opus。而在英文单项榜单中，Llama3反超了Claude，与GPT-4打成了平手。对于这一结果，Meta的首席科学家LeCun十分高兴，转发了推文并
怎么用bootstrap检验中介效应
Apr 05, 2024 am 03:57 AM
Bootstrap检验采用重抽样技术评估统计检验的可靠性，用于证明中介效应的显着性：首先计算直接效应、间接效应和调解效应的置信区间；其次根据Baron和Kenny或Sobel方法计算调解类型的显着性；最后估计自然间接效应的置信区间。
bootstrap中介检验结果怎么看
Apr 05, 2024 am 03:30 AM
Bootstrap 中介检验通过多次重新抽样数据来评估调解效应：间接效应置信区间：表示调解效应估计范围，如果区间不含零，则效应显着。 p 值：评估置信区间不含零的概率，小于 0.05 表示显着。样本量：用于分析的数据样本数量。 Bootstrap 次采样次数：重复抽样的次数（500-2000 次）。若置信区间不含零且 p 值小于 0.05，则调解效应显着，表明中介变量解释了自变量和因变量之间的关系。
bootstrap和springboot有什么区别
Apr 05, 2024 am 04:00 AM
Bootstrap 和 Spring Boot 的主要区别在于：Bootstrap 是一个轻量级 CSS 框架，用于网站样式，而 Spring Boot 是一个强大、开箱即用的后端框架，用于 Java web 应用程序开发。Bootstrap 基于 CSS 和 HTML，而 Spring Boot 基于 Java 和 Spring 框架。Bootstrap 专注于创建网站外观，而 Spring Boot 专注于后端功能。Spring Boot 可与 Bootstrap 集成，以创建功能齐全、美观
bootstrap检验中介效应stata命令结果怎么导出来
Apr 05, 2024 am 03:39 AM
在 Stata 中导出 Bootstrap 中介效应检验的结果：保存结果：bootstrap post创建变量列表：local vars: coef se ci导出结果（CSV）：export delimited results.csv, varlist(`vars') replace comma nolabel
