jquery 實現簡單的手風琴效果
阿新 • • 發佈：2018-06-22
PE charset ML wid 圖片 eight list true 效果
<!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>
jquery 實現簡單的手風琴效果