<style> * { margin: 0; padding: 0; list-style: none; } .menu { width: 200px; height: 400px; border: 5px solid blue; margin: 100px auto; } .menu>li { text-indent: 10px; } .menu>li .title { padding: 5px 0; cursor: pointer; user-select: none; color: #666; } .menu>li .list { display: none; padding-left: 10px; } </style> <link rel="stylesheet" href="//at.alicdn.com/t/font_1887112_ourdsailrr.css"> </head> <body> <ul class="menu"> <li> <div class="title"> <i class="iconfont icon-right"></i> 我的好友</div> <ul class="list"> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> <li> <div class="title"> <i class="iconfont icon-right"></i> 我的同事</div> <ul class="list"> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> <li> <div class="title"> <i class="iconfont icon-right"></i> 我的同学</div> <ul class="list"> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(\'.ww\').click(function(){ $(this).siblings().hide() }) $(".menu>li .title").click(function () { $(\'.list\').hide() // $(\'.list\').slideUp() $(this).find(\'i\') .toggleClass(\'iconfont icon-right\') .toggleClass(\'iconfont icon-arrow-right\') $(this).next().slideToggle(200) // let list = $(this).next() // list.slideToggle(200) // list.toggle() }) </script>