[TOC]
## 思想
> 1. 将选择的li的定位到盒子的固定位置，给ul一个padding-top，避免元素覆盖
> 2. 选择后 将ul隐藏 设置超出隐藏 height为0； 被选择的元素在padding位置，因此不会被隐藏
## html
```
<div class="credit-class ">
<ul class="credit-class-hide">
<li class="choose">物流</li>
<li >医疗</li>
<li >生活</li>
</ul>
</div>
```
## 样式CSS
```
*{
margin: 0;
padding: 0
}
.credit-class {
width: 60px;
background: #fff;
text-align: center;
position: relative;
}
.credit-class ul {
padding-top: 30px;
}
.credit-class-hide {
height: 0px;
overflow: hidden;
}
.credit-class li {
width: 100%;
list-style: none;
line-height: 30px;
}
.credit-class ul .choose {
background: #3DCD58;
color: #fff;
position: absolute;
top: 0px;
display: block;
}
```
## jQuery代码
```
$(function () {
$(".credit-class ul li").click(function () {
console.log(1)
$(this).addClass("choose").siblings().removeClass("choose");
$(".credit-class ul").toggleClass("credit-class-hide")
})
})
```
