您的位置：首页 > Web前端 > JQuery

jQuery 操作导航栏

2016-02-23 10:26 525 查看 
<html>
<head>
<title>菜单</title>
<script type="text/javascript"src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".level1> a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;

});

});
</script>
</head>
<body>

<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2" style="display: none;">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T桖</a></li>
<li><a href="#none">长袖T桖</a></li>
</ul>
</li>

<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2" style="display: none;">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>

<li class="level1">
<a href="#none">裤子</a>
<ul class="level2" style="display: none;">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>

</ul>

</div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航