<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 200px;
margin: 20px auto;
}
#tlist>li {
background: #FFDBB9;
cursor: pointer;
font-size: 20px;
line-height: 2;
}
#tlist>li>i {
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 5px solid #6D6F6F;
border-color: #6D6F6F transparent;
border-bottom: 0;
vertical-align: middle;
margin: 0 5px;
transform: rotate(-90deg);
transition: all 1s;
}
/* #tlist>li:hover i{
transform: rotate(0deg);
} */
.flist {
background: #FFFAF1;
display: none;
}
.flist li:hover {
background: #0084BB;
}
.wrap .active {
display: block;
}
.wrap #tlist .act {
transform: rotate(0deg);
}
</style>
<script src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('.tli').click(function(){
$(this).children('i').toggleClass('act');
$(this).find('.flist').toggleClass('active');
})
})
</script>
</head>
<body>
<div class="wrap">
<ul id="tlist">
<li class="tli"><i></i>我的好友
<ul class="flist">
<li class="fli">小張</li>
<li class="fli">小代</li>
<li class="fli">小孫</li>
</ul>
</li>
<li class="tli"><i></i>我的家人
<ul class="flist">
<li class="fli">小張</li>
<li class="fli">小代</li>
<li class="fli">小孫</li>
</ul>
</li>
<li class="tli"><i></i>我的同學
<ul class="flist">
<li class="fli">小張</li>
<li class="fli">小代</li>
<li class="fli">小孫</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
![]()
$(function() {
$('.tli').each(function(idx,item){
console.log(idx,item,this)
//添加點擊事件
$(this).click(function(){
console.log(1)
$('.tli i').css('transform','rotate(-90deg)');
$('.tli .flist').css({'display':'none'});
$(this).children('i').css('transform','rotate(0deg)')
$(this).find('.flist').css({'display':'block'});
})
