jQuery實現QQ分組列表效果
阿新 • • 發佈：2018-12-16
一、實現效果
1.未點選分組標題之前，所有成員都隱藏
2.點選分組標題之後，隱藏的要顯示，已經顯示的要隱藏
3.在點選一個分組標題時，其他已經展開的分組，要隱藏
二、程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ //siblings()可找到該元素的同胞元素 var $hide=$(".group").siblings(); //設定所有成員隱藏 $hide.hide(); //設定標題點選時顯示“手”的CSS $(".group").css("cursor","pointer"); //設定class="group"的分組標題標籤的點選事件 $(".group").click(function() { //將這個點選標籤下的同胞元素賦給一個新的變數 var $hide=$(this).siblings(); //假如其同胞元素是顯示的，就將其隱藏，反之讓其顯示，並且把其他分組下的同胞元素隱藏 if($($hide).is(":visible")){ $hide.hide(); }else{ $hide.show(); //除了本分組外的，其他分組的同胞元素隱藏 $(".group").not(this).siblings().hide(); } }); }); </script> <style type="text/css"> div *{ display:block; width:200px; } div span{ background-color : #0f0; } </style> </head> <body> <div> <span class="group">我的好友</span> <a>人壽保險</a> <a>富德人壽</a> </div> <div> <span class="group">特別關心</span> <a>無臉怪</a> <a>寶寶</a> </div> </body> </html>