<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
<style>
body,html,ul,li,h3{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
li{
line-height: 50px;
width: 200px;
text-align: center;
background-color: aqua;
cursor: pointer;
}
li ul{
display: none;
}
li ul li {
background-color: #caff95;
}
</style>
</head>
<body>
<ul>
<li class="parent_list">
<h3>导航1</h3>
<ul>
<li>导航1</li>
<li>导航1</li>
<li>导航1</li>
</ul>
</li>
<li class="parent_list">
<h3>导航1</h3>
<ul>
<li>导航1</li>
<li>导航1</li>
<li>导航1</li>
</ul>
</li>
<li class="parent_list">
<h3>导航1</h3>
<ul>
<li>导航1</li>
<li>导航1</li>
<li>导航1</li>
</ul>
</li>
<li class="parent_list">
<h3>导航1</h3>
<ul>
<li>导航1</li>
<li>导航1</li>
<li>导航1</li>
</ul>
</li>
</ul>
<script>
$(function () {
$(document).on("click", ‘.parent_list‘, function () {
$(this).children(‘ul‘).slideToggle();
$(this).siblings(‘li‘).children(‘ul‘).slideUp();
})
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/lcf1314/p/9213152.html
时间： 2024-11-05 21:49:43