<!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>原文地址：https://www.cnblogs.com/wangxingren/p/10265881.html
时间： 2024-09-29 18:48:43