Skip to content

Instantly share code, notes, and snippets.

@sanpingz

sanpingz/custom.js

Created May 16, 2013 14:01
Show Gist options
  • Save sanpingz/5591948 to your computer and use it in GitHub Desktop.
Save sanpingz/5591948 to your computer and use it in GitHub Desktop.
Download ZIP
菜单多级联动
Raw
custom.js
$(function(){
var nav = $('#nav li'),
sub_nav = nav.find('.sub-nav');
nav.on({
'mouseover':function(e){
// console.log($(e.target));
console.log($(e.currentTarget));
// console.log($(e.this));
$(e.currentTarget)
.addClass('js_pos-r').children('.sub-nav').show().end()
.siblings().removeClass('js_pos-r').find('.sub-nav').hide();
},
'mouseleave':function (e) {
sub_nav.hide();
}
})
})
/**
*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>nav</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.1/build/cssreset/cssreset-min.css" media="all" />
<link rel="stylesheet" href="layout.css" media="all" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="">1</a></li>
<li><a href="">2</a>
<ul class="sub-nav">
<li><a href="">2.1</a>
<ul class="sub-nav">
<li><a href="">2.1.1</a></li>
<li><a href="">2.1.2</a></li>
<li><a href="">2.1.3</a></li>
<li><a href="">2.1.4</a></li>
<li><a href="">2.1.5</a></li>
</ul>
</li>
<li><a href="">2.2</a></li>
<li><a href="">2.3</a>
<ul class="sub-nav">
<li><a href="">2.3.1</a></li>
<li><a href="">2.3.2</a></li>
<li><a href="">2.3.3</a></li>
</ul>
</li>
<li><a href="">2.4</a></li>
</ul>
</li>
<li><a href="">3</a>
<ul class="sub-nav">
<li><a href="">3.1</a>
<ul class="sub-nav">
<li><a href="">3.1.1</a></li>
<li><a href="">3.1.2</a></li>
<li><a href="">3.1.3</a></li>
</ul>
</li>
<li><a href="">3.2</a></li>
<li><a href="">3.3</a></li>
<li><a href="">3.4</a></li>
</ul>
</li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
</ul>
</body>
</html>
*
*/
/*
*
#nav{
width: 100px;
position: relative;
font-family: arial;
}
#nav .sub-nav{
width: 100px;
display: none;
position: absolute;
top:0;
left:100px;
}
#nav a{
display: block;
padding: 5px 10px;
background-color: #a0cdec;
text-decoration: none;
color: #337ba4;
border-bottom: 1px dashed #bdeaff;
}
#nav a:hover{
background-color: #337ba4;
color: #fff;
}
.js_pos-r{
position: relative;
}
*
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment