[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")
})
})
```
