JQuery - QQ使用者分組（案例）
阿新 • • 發佈：2020-11-24
JQuery - QQ使用者分組
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> /* 同時只能開啟一個分組 * 單擊分組欄（綠色）開啟分組 * * children() 所有的子元素 * 引數為篩選條件 * prev() 獲得上面的兄弟 * nextAll() 獲得下面的所有兄弟 * parent() 獲得父元素 * siblings() 所有兄弟 * find() 查詢指定內容 * * * // 鏈式程式設計 */ $(function(){ $("div").children("a").hide(500).prev().click(function () { // this是js物件 $(this).nextAll().show(500).parent().siblings().find("a").hide(500) }) }); </script> <style type="text/css"> div *{ display:block; width:200px; } div span{ background-color : gray; } </style> </head> <body> <div> <span>追求中</span> <a>嬌嬌</a> <a>鳳兒</a> <a>婷婷</a> </div> <div> <span>已交往</span> <a>婉婉</a> <a>冰冰</a> <a>熊熊</a> </div> <div> <span>已分手</span> <a>啵啵</a> <a>琳琳</a> <a>佳佳</a> </div> </body> </html>