今天给大家分享一个手风琴效果的组件,可以修改样式为自己所用。
这里采用了jQuery的slideToggle()效果,点击可以切换展示和折叠。
欢迎给出意见和建议。
下面是效果图:
下面是代码(仅供参考) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示百分比手风琴</title>
<script src="./js/jquery.js"></script>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none
}
ul {
box-sizing: border-box;
padding: 5px;
width: 400px;
/* background:pink; */
background-color: #052143;
margin: 50px auto;
color: #CDCAC7;
}
ul>li {
/* border-bottom: 1px solid #ccc; */
line-height: 50px;
text-align: center;
}
ul .summary {
border-radius: 15px;
height: 100px;
background-color: #12315E;
margin: 10px 0;
padding: 10px;
}
/* Forecast单行样式 */
ul .summary .top {
display: flex;
justify-content: space-between;
width: 100%;
}
ul .summary .top h3 {
display: inline-block;
width: 43px;
font-weight: 400;
font-size: 25px;
color: #fff;
}
ul .summary .top .goal-style {
flex: 1;
display: flex;
justify-content: space-between;
margin: 0 45px;
font-size: 15px;
}
/* ul .summary .top .goal-style span {
} */
ul .summary .top .rate {
color: #CDCAC7;
}
.rate-red {
color: #F90102;
}
.rate-green {
color: #00B54F;
}
/* Mother Lock单行样式 */
ul .summary .bottom {
display: flex;
justify-content: space-between;
width: 100%;
}
ul .summary .bottom h3 {
display: inline-block;
width: 30px;
font-weight: 400;
font-size: 25px;
color: #fff;
}
ul .summary .bottom .sector-rate{
width: 58px;
color: #00B54F;
}
ul .summary .bottom .goal-style{
flex: 1;
display: flex;
justify-content: space-between;
margin: 0 30px;
font-size: 15px;
}
ul>li>ol {
display: none;
background-color:#052143;
}
ul>li>ol>li {
padding: 10px;
border-radius: 5px;
margin: 5px 15px;
background-color: #12315E;
line-height: 35px;
}
ul>li>ol>li .top {
display: flex;
justify-content: space-between;
width: 100%;
}
ul>li>ol>li .top h3 {
display: inline-block;
width: 30px;
font-weight: 400;
font-size: 15px;
color: #fff;
}
ul>li>ol>li .top .goal-style {
flex: 1;
display: flex;
justify-content: space-between;
margin: 0 45px;
font-size: 13px;
}
ul>li>ol>li .top .rate {
font-size: 13px;
color: #F90102;
}
ul>li>ol>li .bottom {
display: flex;
justify-content: space-between;
width: 100%;
}
ul>li>ol>li .bottom h3 {
display: inline-block;
width: 30px;
font-weight: 400;
font-size: 20px;
color: #00B54F;
}
ul>li>ol>li .bottom .sector-rate {
width: 45px;
font-size: 15px;
}
ul>li>ol>li .bottom .goal-style{
flex: 1;
display: flex;
justify-content: space-between;
margin: 0 30px;
font-size: 13px;
}
ul>li>ol>li .bottom .rate {
font-size: 13px;
color: #00B54F;
}
</style>
</head>
<body>
<ul id="ul">
<li>
<div class="summary">
<div class="top">
<h3>Dep1</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate-red"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate-green"><i></i>0.10%</span>
</div>
</div>
<ol>
<li class="detail">
<div class="top">
<h3>Dep11</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
<li class="detail">
<div class="top">
<h3>Dep12</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
</ol>
</li>
<li>
<div class="summary">
<div class="top">
<h3>Dep2</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate-red"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate-green"><i></i>0.10%</span>
</div>
</div>
<ol>
<li class="detail">
<div class="top">
<h3>Dep21</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
<li class="detail">
<div class="top">
<h3>Dep22</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
</ol>
</li>
<li>
<div class="summary">
<div class="top">
<h3>Dep3</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate-red"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate-green"><i></i>0.10%</span>
</div>
</div>
<ol>
<li class="detail">
<div class="top">
<h3>Dep31</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
<li class="detail">
<div class="top">
<h3>Dep32</h3>
<span class="goal-style">Forecast Goal: <span>4.05%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
<div class="bottom">
<h3 class="sector-rate">4.8%</h3>
<span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
<span class="rate"><i></i>0.10%</span>
</div>
</li>
</ol>
</li>
</ul>
<script type="text/javascript">
$("#ul>li>div").click(function(){
$(this).next().slideToggle()
});
</script>
</body>
</html>