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

JQuery实现可折叠导航栏

2015-05-31 10:58 711 查看

实现一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery实现导航栏</title>

<style type="text/css">
a{
text-decoration:none;
display:block;
}
.link{
background-color:#C2C2BC;
}
.level1{
border:1px solid #eee;
}
.level2{
display:none;
}
div{
width:150px;
text-align:center;
}
</style>
</head>

<body>
<div class="box">
<div class="menu">
<div class="level1">
<a href="javascript:;" data="衬衫">衬衫</a>
<div class="level2">
<div><a href="javascript:;">短袖衬衫</a></div>
<div><a href="javascript:;">长袖衬衫</a></div>
<div><a href="javascript:;">短袖T恤</a></div>
<div><a href="javascript:;">长袖T恤</a></div>
</div>
</div>
<div class="level1">
<a href="javascript:;" data="卫衣">卫衣</a>
<div class="level2">
<div><a href="javascript:;">开襟卫衣</a></div>
<div><a href="javascript:;">套头卫衣</a></div>
<div><a href="javascript:;">运动卫衣</a></div>
<div><a href="javascript:;">童装卫衣</a></div>
</div>
</div>
<div class="level1">
<a href="javascript:;" data="裤子">裤子</a>
<div class="level2">
<div><a href="javascript:;">短裤</a></div>
<div><a href="javascript:;">休闲裤</a></div>
<div><a href="javascript:;">牛仔裤</a></div>
<div><a href="javascript:;">免烫卡其裤</a></div>
</div>
</div>
</div>
</div>

<script src="../Public/assets/plugins/jquery/jquery-1.11.2.js" type="text/javascript"></script>
<script src="../Public/assets/plugins/jquery/jquery-1.11.2.min.js"></script>

<script src="../public/assets/global/js/mxx.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Mxx.init();
});
</script>

</body>
</html>

var Mxx = function(){
var initData = function(){
$(".level1>a").bind('click',function(){
$(this).toggleClass("link");
$(this).next().slideToggle();
});

};
return{
init:function(){
initData();
}
};
}();

点击链接之前：

点击链接之后：

期间遇到的问题：

一、导航栏中有三个商品链接，都在div中，怎么判断用户点击的是哪个链接，然后对其展开？

　　$(this)指向当前对象，然后通过查找父子兄弟，实现相应的操作

　　JQuery的父，子，兄弟节点查找方法http://www.cnblogs.com/srxhmxx/p/4541656.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航