jquery各版本下载地址
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title</title> <link rel="icon" href=""> <style> *{margin: 0; padding: 0; list-style: none; } span{ display: block; width: 100px; height: 50px; line-height: 50px; text-align: center; background-color: orchid; border: 1px solid #cccccc; } .menu{ display: none; } </style></head><body><ul> <li class="lists"> <span>人族</span> <ul class="menu"> <li>剑侠客</li> <li>逍遥客</li> <li>巫蛮儿</li> <li>偃无师</li> </ul> </li> <li class="lists"> <span>魔族</span> <ul class="menu"> <li>骨精灵</li> <li>狐美人</li> <li>杀破狼</li> <li>鬼潇潇</li> </ul> </li> <li class="lists"> <span>仙族</span> <ul class="menu"> <li>玄彩娥</li> <li>神天兵</li> <li>舞天姬</li> <li>羽灵神</li> </ul> </li></ul><script src="jquery.js"></script>//一定要先引入JQuery文件<script> $(".lists").on("click",function () { $(this).children("ul").slideToggle(); $(this).siblings().children("ul").slideUp(); })</script></body></html>
