<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉導航欄</title>
<style>
a{
text-decoration:none;
}
.menu{
margin:100px 100px;
border:1px solid #ccc;
width:160px;
}
.level>a{
display:block;
width:150px;
padding:5px 0 5px 10px;
background:#dadada;
color:black;
}
.level>a:hover{
background:blue;
color:#fff;
}
.level2{
display:none;
background:#d4efe7;
}
.level2>li>a{
display:block;
color:black;
padding:2px 0 2px 16px;
}
.level2>li>a:hover{
background:#38d486;
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level">
<a href="javascript">襯衫</a>
<ul class="level2">
<li><a href="javacript">短袖襯衫</a></li>
<li><a href="javacript">長袖襯衫</a></li>
<li><a href="javacript">短袖T恤</a></li>
<li><a href="javacript">長袖T恤</a></li>
</ul>
</li>
<li class="level">
<a href="javascript">衛衣</a>
<ul class="level2">
<li><a href="javacript">開襟衛衣</a></li>
<li><a href="javacript">套頭衛衣</a></li>
<li><a href="javacript">運動衛衣</a></li>
<li><a href="javacript">童裝衛衣</a></li>
</ul>
</li>
<li class="level">
<a href="javascript">褲子</a>
<ul class="level2">
<li><a href="javacript">短褲</a></li>
<li><a href="javacript">休閒褲</a></li>
<li><a href="javacript">牛仔褲</a></li>
<li><a href="javacript">免燙卡其褲</a></li>
</ul>
</li>
</ul>
</div>
<script src="./jquery-1.12.4.js" type="text/javascript"></script>
<script>
$(".level>a").click(function(){
$(this).addClass("current")
.next().slideDown(200)
.parent().siblings().children("a").removeClass("current")
.next().slideUp(200);
return false;
})
</script>
</body>
</html>
jQuery實現側邊下拉導航欄
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
標籤點擊事件後的操作
其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>