<!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;
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", 'h3', function (e) {
$(this).siblings('ul').slideToggle();
$(this).parent().siblings('li').children('ul').slideUp();
})
})
</script>
</body>
</html>
