jQuery+Bootstrap手风琴折叠菜单代码

Posted 2021-04-08 轩宇网工作室

首先引入图标样式和布局

<!--图标样式和布局-->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!--公共样式-->

<link rel="stylesheet" type="text/css" href="css/demo.css">

<link href="css/font-awesome.min.css" rel="stylesheet">

样式CSS用到的样式肯定不能少

demo.css文件代码：

<style type="text/css">

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */

*,

*:after,

*:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

body{

color: #D5D6E2;

font-weight: 500;

font-size: 1.05em;

font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

}

</style>

<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>

实现方法直接引入jQuery、Bootstrap

<script type="text/javascript"></script>

<script type="text/javascript"></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>

效果图：

链接: https://pan.baidu.com/s/1hsGjdzA 密码: c5ec

PS：如果你不想记得密码，可以查看历史文章里的《 》