我们要做一个这样的分组 首先就需要画出它的CSS样式
* {
padding: 0;
margin: 0;
list-style: none;
}
.box1 {
width: 200px;
height: 400px;
box-shadow: 1px 1px 10px #888888;
margin: 180px auto;
user-select: none;
overflow: hidden;
}
.box1 li {
margin: 15px 20px;
cursor: pointer;
}
.title {
display: inline-block;
}
.list {
display: none;
}
这就是简单的CSS
接下来
<ul class="box1">
<li class="lists"> <div class="title"> <i class="iconfont icon-arrow"></i> 我的好友 </div> <ul class="list"> <li>尹达</li> <li>尹达</li> <li>尹达</li> <li>因阿达</li> <li>尹达</li> </ul> </li> <li> <div class="title"> <i class="iconfont icon-arrow"></i> 我的同事 </div> <ul class="list"> <li>尹达</li> <li>尹达</li> <li>尹达</li> <li>因阿达</li> <li>尹达</li> </ul> </li><li><div class="title"><i class="iconfont icon-arrow"></i>我的家人</div><ul class="list"><li>尹达</li><li>尹达</li><li>尹达</li><li>因阿达</li><li>尹达</li></ul></li><li><div class="title"><i class="iconfont icon-arrow"></i>我的室友</div><ul class="list"><li>尹达</li><li>尹达</li><li>尹达</li><li>因阿达</li><li>尹达</li></ul></li><li><div class="title"><i class="iconfont icon-arrow"></i>我的同学</div><ul class="list"><li>尹达</li><li>尹达</li><li>尹达</li><li>因阿达</li><li>尹达</li></ul></li></ul>
由于我们这里的图标出处与iconfont 所以在CSS前需要外部引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_2012430_5mtu7f1o7il.css">
接下来引入JQ数据库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
数据库引完我们就可以开始写
$(".title").click(function () {
$(this).find("i").toggleClass("iconfont icon-arrow").toggleClass("iconfont icon-downarrow")
$(this).siblings().slideToggle(200)
let fu = $(this).parent().siblings()
fu.find(".list").hide()
})
