jquery好友面板切换功能代码实现
程序员文章站
2022-07-07 23:46:57
jquery好友面板切换功能代码实现
jquery好友面板切换功能代码实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style> #u1 li{ margin-bottom:10px; background-color:orange; font-size:20px; font-weight:bolder; cursor:pointer; } #u1 li ul{ list-style-type:none; margin:0; padding:0; } #u1 li ul li{ background-color:pink; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('#u1 li ul li').hide(); $('#u1 li').click(function () { $('ul li', $(this)).show(500); $('ul li', $(this).siblings('li')).hide(500); }); }); </script> </head> <body> <p style="width:200px;height:500px;border:1px solid red"> <ul id="u1" style="list-style-type:none; margin:0; padding:0; text-align:center;"> <li> 幼儿园同学 <ul> <li>鼻涕虫</li> <li>爱哭鬼</li> <li>张大胆</li> </ul> </li> <li> 小学同学 <ul> <li>张三丰</li> <li>张无忌</li> <li>乔布斯</li> </ul> </li> <li> 初中同学 <ul> <li>盖茨</li> <li>种哥</li> <li>奥巴马</li> </ul> </li> </ul> </p> </body> </html>