<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+Bootstrap手风琴折叠菜单代码</title>
<!--图标样式和布局-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!--公共样式-->
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
.demo{padding: 2em 0; background: #fff;}
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion .panel{
border: none;
box-shadow: none;
border-radius: 0;
margin: 0 0 15px 10px;
}
#accordion .panel-heading{
padding: 0;
border-radius: 30px;
}
#accordion .panel-title a{
display: block;
padding: 12px 20px 12px 50px;
background: #ebb710;
font-size: 18px;
font-weight: 600;
color: #fff;
border: 1px solid transparent;
border-radius: 30px;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed{
background: #fff;
color: #0d345d;
border: 1px solid #ddd;
}
#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{
content: "\f107";
font-family: fontawesome;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 50%;
background: #ebb710;
font-size: 25px;
color: #fff;
text-align: center;
border: 1px solid transparent;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
position: absolute;
top: -5px;
left: -20px;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:after{
content: "\f105";
background: #fff;
color: #0d345d;
border: 1px solid #ddd;
box-shadow: none;
}
#accordion .panel-body{
padding: 20px 25px 10px 9px;
background: transparent;
font-size: 14px;
color: #8c8c8c;
line-height: 25px;
border-top: none;
position: relative;
}
#accordion .panel-body p{
padding-left: 25px;
border-left: 1px dashed #8c8c8c;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery+Bootstrap手风琴折叠菜单代码.zip
版权申诉
87 浏览量
2023-09-23
09:55:31
上传
评论
收藏 477KB ZIP 举报
jQuery+Bootstrap手风琴折叠菜单代码.zip （14个子文件） 
js 
bootstrap.min.js 36KB jquery-1.11.0.min.js 94KB css bootstrap.min.css 118KB demo.css 559B font-awesome.min.css 28KB
index.html 5KB fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB fontawesome-webfont.eot 75KB glyphicons-halflings-regular.woff2 18KB fontawesome-webfont.woff 88KB fontawesome-webfont.woff2 70KB fontawesome-webfont.ttf 149KB资源评论
码云笔记
- 粉丝: 1w+
- 资源: 5812
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
最新资源
- sm2.js，前端加密算法，主要方法sm2EncryptPwd
- 人工智能-项目实践-jira-Python Jira library. Development chat
- Python俄罗斯方块Tetris源文件下载
- 基于Java 实现的LFU算法，特别适合新手，带有测试case
- 基于Java实现的LRU算法，特别适合新手，带有测试case
- 人工智能-项目实践-数据结构-冒泡排序、选择排序、快速排序、堆排序、插入排序、希尔排序、归并排序.zip
- 基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)作业
- C++ OnnxRuntime部署yolov8模型
- 人工智能-项目实践-数据结构-冒泡排序；直接插入排序；希尔排序；快速排序；堆排序；归并排序；基数排序.zip
- 人工智能-项目实践-数据结构-二叉树的层序遍历（左-右）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
