實現效果圖如下：
說明：
1、css隱藏分組下的好友內容；
2、Jquery實現點擊分組項事件，實現好友內容的顯示和隱藏；
3、樣式1，可展開多個分組；樣式2，只能有一個分組展開；
源碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .contact-ul{margin-top:10px;font-size:14px;} .contact-ul>.contact-li{ text-align: left; border-bottom: 1px solid #E0E0E0; padding:10px; } .contact-ul>.contact-li:hover{ cursor:pointer; } .contact-ul>.contact-li:last-child{border-bottom:0px;width:100%;} .contact-ul>.contact-li>.contact-content{ display: none; } .fa-box{width:100%;overflow-y:auto;position:absolute;bottom:60px;top:50px;} .fa-box-item{ width:100%; padding-left:10px; padding-top:5px; padding-bottom:5px; background:white; border-bottom:1px solid rgba(160,160,160,.3); overflow:hidden;white-space:nowrap;text-overflow:ellipsis; } .fa-box-item:hover{ cursor:pointer; } .fa-box-item:last-child{border-bottom:0px;} .fa-box-item-left{width:40px;height:40px;float:left;background:pink;border-radius:50%;position:relative;} .fa-box-item-right{height:40px;max-width:65%;float:left;padding-left:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .fa-color-red{color:rgba(200,0,0,.8);} </style> <script type="text/javascript"> $(function(){ $("#contact-ul>.contact-li>.contact-group").click(function(){ if($(this).find("i").hasClass("fa-angle-down")){ /**設置當前選中圖標**/ $(this).find("i").removeClass("fa-angle-down"); $(this).find("i").addClass("fa-angle-up"); /**樣式1：只關注當前項**/ $(this).nextAll().slideDown(); /**樣式2：設置顯示當前內容，其他組內容隱藏，未選中圖標**/ //$(this).nextAll().slideDown().end().parent().siblings().children(".contact-content").hide(); //$(this).parent().siblings().children("div").children("i").removeClass("fa-angle-up").addClass("fa-angle-down"); }else{ /**設置當前取消選中圖標**/ $(this).find("i").removeClass("fa-angle-up"); $(this).find("i").addClass("fa-angle-down"); /**樣式1：只關注當前項**/ $(this).nextAll().slideUp(); /**樣式2：設置所有內容隱藏，未選中圖標**/ //$(this).nextAll().slideUp().end().parent().siblings().children(".contact-content").hide(); //$(this).parent().siblings().children("div").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");; } }); }); </script> </head> <body> <div class="contact-ul" id="contact-ul"> <div class="contact-li"> <div class="contact-group"> <i class="fa fa-angle-down"></i> 好友</div> <div class="contact-content"> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> </div> </div> <div class="contact-li"> <div class="contact-group"> <i class="fa fa-angle-down"></i> 好友2</div> <div class="contact-content"> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> </div> </div> <div class="contact-li"> <div class="contact-group"> <i class="fa fa-angle-down"></i> 好友3</div> <div class="contact-content"> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> </div> </div> <div class="contact-li"> <div class="contact-group"> <i class="fa fa-angle-down"></i> 好友4</div> <div class="contact-content"> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> <div class="fa-box-item"> <div class="fa-box-item-left"></div> <div class="fa-box-item-right">王三 <span class="fa-size-xxs">在線</span><br><i class="fa fa-heart fa-color-red fa-size-xxs" ></i>世界之大世界之大世界之大世界之大世界之大世界之大世界之大世界之大</div> </div> </div> </div> </div> </div> </body> </html>