先看效果
这种手风琴效果可以直接通过bootstrap进行制作
代码如下：
<!DOCTYPE html> <html> <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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <link rel="stylesheet" href="./css/global.css"> <link rel="stylesheet" href="./css/header.css"> <link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/nav.css"> <script src="./js/rem7.5.js"></script> <title>页面二</title> <link rel="stylesheet" href="./css/bootstrap.css"> <script src="./js/jquery-3.5.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion"> <div class="panel "> <div class="panel-heading"> <!-- 主盒子样式panel-title --> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 专家团队 </a> </h4> </div> <!-- in默认展开 --> <div id="collapseOne" class="panel-collapse collapse "> <div class="panel-ul"> <ul> <li> <a href="###"> 重点研究方向 </a> </li> <li><a href="###">重点工程项目</a></li> <li><a href="###">数字医学白皮书</a></li> </ul> </div> </div> </div> <div class="panel " style="margin-top: 0px"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 科研与转化 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-ul"> <ul> <li><a href="###">重点研究方向</a></li> <li><a href="###">重点工程项目</a></li> <li><a href="###">数字医学白皮书</a></li> </ul> </div> </div> </div> <div class="panel " style="margin-top: 0px"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 教育与讲座 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-ul"> <ul> <li><a href="###">重点研究方向</a></li> <li><a href="###">重点工程项目</a></li> <li><a href="###">数字医学白皮书</a></li> </ul> </div> </div> </div> <div class="panel "> <div class="panel-heading"> <!-- 主盒子样式panel-title --> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 新闻中心 </a> </h4> </div> <!-- in默认展开 --> <div id="collapseFour" class="panel-collapse collapse "> <div class="panel-ul"> <ul> <li><a href="###">重点研究方向</a></li> <li><a href="###">重点工程项目</a></li> <li><a href="###">数字医学白皮书</a></li> </ul> </div> </div> </div> <div class="panel "> <div class="panel-heading"> <!-- 主盒子样式panel-title --> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"> 关于我们 </a> </h4> </div> <!-- in默认展开 --> <div id="collapseFive" class="panel-collapse collapse "> <div class="panel-ul"> <ul> <li> <a href="###"> 重点研究方向 </a> </li> <li><a href="###">重点工程项目</a></li> <li><a href="###">数字医学白皮书</a></li> </ul> </div> </div> </div> </div> </body> </html>
css样式
#accordion { padding: 0; margin: 0; } .panel-title a { background: url("../image/daohang/＞.png") right .46rem center no-repeat; background-size: .33rem .2rem; display: block; font-size: .2rem; /* padding: .3rem; */ text-decoration: none; width: 6.9rem; margin: 0 auto; height: 1.1rem; line-height: 1.1rem; padding-left: .47rem; box-sizing: border-box; border-bottom: .02rem solid #E7E7E7; font-size: .3rem; font-family: SourceHanSansCN; font-weight: 500; color: #292929; } a:link { text-decoration: none; } a:hover, a:focus{ text-decoration:none !important; } .panel-heading { padding: 0; margin: 0; } .panel-ul ul { list-style: none; text-decoration: none; width: 6.9rem; margin: 0 auto; } .panel-ul ul li { width: 6.9rem; height: 1.1rem; border-bottom: .02rem solid #E7E7E7; padding-left: .62rem; } .panel-ul ul li a { width: 6.9rem; height: 1.1rem; display: inline-block; line-height: 1.1rem; font-size: .3rem; font-family: SourceHanSansCN; font-weight: 400; color: #292929; } .panel-group .panel+.panel { margin-top: 0 !important; } .panel-heading { padding: 0 !important; }
