用 CSS3 实现的，由于高度的不确定，而 transtion 是需要具体的树枝，所以可以通过 max-height 这个属性间接的实现这么个效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}ul,li {list-style-type: none;}body {-moz-user-select: none;/*火狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;-webkit-touch-callout: none;/*手机端*/height: 100%;background-image: url("http://img1./it/u=1655353947,3571980950&fm=26&gp=0.jpg");background-repeat: no-repeat;background-size: cover;}#box {width: 200px;}li {color: #00BCD4;line-height: 40px;padding-left: 30px;}.td {max-height: 0;overflow: hidden;transition: all 5s ease-in;}li:hover {cursor: pointer;color: #FFFFFF;}li:hover .td {background-color: rgba(0, 0, 0, 0.2);max-height: 9999px;transition-timing- function:ease-out;}</style></head><body><ul id="box"><li class="box-item"><div class="hd">战士</div><ul class="td"><li>露娜</li><li>花木兰</li><li>白起</li></ul></li><li class="box-item"><div class="hd">刺客</div><ul class="td"><li>李白</li><li>百里玄策</li><li>荆轲</li></ul></li><li class="box-item"><div class="hd">法师</div><ul class="td"><li>小巧</li><li>沈梦希</li><li>安其拉</li></ul></li><li class="box-item"><div class="hd">射手</div><ul class="td"><li>阿狸</li><li>马克</li><li>萌芽</li></ul></li><li class="box-item"><div class="hd">辅助</div><ul class="td"><li>孙膑</li><li>蔡文姬</li><li>鬼谷子</li></ul></li></ul></body><script>let lg = function() {return console.log(...arguments)}let box = document.querySelector('#box')box.addEventListener('click', function(e) {alert(e.target.innerText)})</script></html>
