<body> <ul class="meuo"> <li> <div class="title"> <i class="iconfont icon-Icon-KeyboardArrow-Down-Rounded-copy"></i>我的好友</div> <ul class="list"> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> </ul> </li> <li> <div class="title"> <i class="iconfont icon-Icon-KeyboardArrow-Down-Rounded-copy"></i>我的家人</div> <ul class="list"> <li>李四</li> <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> $('.title').click(function () { // $(this).next().toggle() // $('.list').slideUp() let other_li = $(this).parent().siblings() other_li.find('i').addClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .removeClass('icon-Icon-KeyboardArrow-Down-Rounded') other_li.find('.list').hide() $(this).find('i') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded') $(this).next().toggle() }) </script></body>
<li> <div class="title"> <i class="iconfont icon-Icon-KeyboardArrow-Down-Rounded-copy"></i>我的好友</div> <ul class="list"> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> </ul> </li> <li>
创建一个ul li 里面有个div 是标题 之后 添加一个i标签 把图片引进 li 里再创建一个ul li方便写样式 然后把样式都写好 再把ul 里的 li里的 li隐藏
<script> $('.title').click(function () { // $(this).next().toggle() // $('.list').slideUp() let other_li = $(this).parent().siblings() other_li.find('i').addClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .removeClass('icon-Icon-KeyboardArrow-Down-Rounded') other_li.find('.list').hide() $(this).find('i') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded') $(this).next().toggle() }) </script>
$(this).next().toggle()
这一步当我点击title的时候 下拉框出现 toggle 是把下拉框的样式都已经封装写好了
$(this).find('i') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .toggleClass('icon-Icon-KeyboardArrow-Down-Rounded')
当我点击的时候 titile里的i标签 中的箭头图标转换
let other_li = $(this).parent().siblings() other_li.find('i').addClass('icon-Icon-KeyboardArrow-Down-Rounded-copy') .removeClass('icon-Icon-KeyboardArrow-Down-Rounded') other_li.find('.list').hide()
当我点击的时候最多只能出现一个下拉框
