DEDECMS-前端之jq展开收缩插件
dedecms-前端之jq展开收缩插件：
html代码：
<div class="acd-items acd-arrow">
<div class="panel-group symb" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="javascript:;">
11111111111111111111
</a>
</h4>
</div>
<div id="ac1" class="panel-collapse collapse in" style="display: block;">
<div class="panel-body">
<p>
2222222222222222222222
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="javascript:;">
33333333333333333
</a>
</h4>
</div>
<div id="ac2" class="panel-collapse collapse">
<div class="panel-body">
<p>
4444444444444444444444444444
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="javascript:;">
5555555555555
</a>
</h4>
</div>
<div id="ac3" class="panel-collapse collapse">
<div class="panel-body">
<p>
6666666666666666666666666
</p>
</div>
</div>
</div>
</div>
</div>
css部分：
<style>
.faq-area .heading h2 {
text-transform: capitalize;
font-weight: 600;
margin-bottom: 30px;
}
.faq-items .panel-group,
.acd-items .panel-group {
margin-bottom: 0;
}
.faq-area .faq-items {
padding-left: 35px;
}
.acd-items .panel-heading .panel-title a span {
background: #ff5a6e none repeat scroll 0 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
display: inline-block;
height: 30px;
line-height: 30px;
margin-right: 5px;
text-align: center;
width: 30px;
}
.acd-items .panel-heading .panel-title a {
display: block;
padding: 19px 0 20px 30px;
position: relative;
border: 1px solid #e7e7e7;
padding-right: 40px;
letter-spacing: 1px;
background: #ffffff;
font-weight: 600;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
font-size:16px;
color:#232323;
}
.acd-items .panel-heading {
padding: 0;
box-shadow: inherit;
background: transparent;
}
.faq-area .acd-items .panel-body {
padding: 20px;
padding-bottom: 10px;
}
.acd-items .panel.panel-default {
border: none;
border-radius: inherit;
box-shadow: inherit;
margin: 0 0 10px;
background: transparent;
}
.acd-items .panel.panel-default:last-child {
margin-bottom: 0;
}
.acd-items .panel-body p:last-child {
margin: 0;
}
.faq-items .panel-body {
padding: 20px;
}
.faq-items .acd-items .panel .panel-body {
border: none;
}
.acd-arrow .panel-group.symb .panel-heading a::after {
content: "\f107";
font-size: 20px;
position: absolute;
right: 10px;
top: 17px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #232323;
}
.acd-arrow.left .panel-group.symb .panel-heading a::after {
content: "\f01b" !important;
font-size: 20px;
position: absolute;
right: auto;
left: 10px;
top: 12px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.acd-arrow.left .panel-group.symb .panel-heading a.collapsed:after {
content: "\f01a" !important;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.faq-area .faq-items .panel-group {
margin: 0;
}
.acd-arrow .panel-group.symb .panel-heading a.collapsed:after {
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
</style>
jq部分：
<script>
$(document).ready(function(){
$('.panel-group .panel-default:first-child').children('.panel-collapse').show();
$('.panel-title a').click(function(){
if($('.panel-default').children('.panel-collapse').is(":visible")){
$('.panel-default').children('.panel-collapse').slideUp();
$(this).parents('.panel-default').children('.panel-collapse').slideToggle();
}else{
$(this).parents('.panel-default').children('.panel-collapse').slideToggle();
}
})
})
</script>
