html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style02.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/all02.js"></script>
</head>
<body >
<ul class="cart">
<li>
<a href="#">選單1</a>
<ul>
<li><a href="#">選單1-1</a></li>
<li><a href="#">選單1-2</a></li>
<li><a href="#">選單1-3</a></li>
</ul>
</li>
<li>
<a href="#">選單2</a>
<ul>
<li><a href="#">選單2-1</a></li>
<li><a href="#">選單2-2</a></li>
<li><a href="#">選單2-3</a></li>
</ul>
</li>
<li>
<a href="#">選單3</a>
<ul>
<li><a href="#">選單3-1</a></li>
<li><a href="#">選單3-2</a></li>
<li><a href="#">選單3-3</a></li>
</ul>
</li>
</ul>
</body>
</html>
=======================================================
css:
.cart{
width: 500px;
margin: 20px auto;
}
.cart > li{
margin-bottom: 1em;
}
.cart > li > a{
color: blue;
border: 1px solid gray;
display: block;
padding: 5px;
}
.cart > li > a:hover{
background: blue;
color: #fff;
}
.cart > li li{ // 所有的li ...在本例子中是在下面兩個階層
margin: 5px 0;
}
.cart ul{ // 先藏起來
display: none;
}
=========================================================
$(document).ready(function() {
$('.cart > li > a').click(function(event) {
event.preventDefault();
$(this).parent().siblings().find('ul').slideUp(); // 關起來
$(this).parent().find('ul').slideToggle();
});
});
沒有留言:
張貼留言