<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
li{
list-style: none;
}
ul{
padding: 0px;
margin: 0px;
}
.main{
background-color: aquamarine;
background-repeat: no-repeat;
width: 100px;
width: 600px;
}
li{
background-color: salmon;
}
a{
display: block;
width: 80px;
padding: 3px 0px 3px 20px;
}
.main a{
color: white;
}
.main li a{
color: blue;
}
.main ul{
display: none;
}
.h{
float: left;
}
.main ul li{
float: left;
width: 200px;
}
</style>
</head>
<body>
<ul>
<li class="main"><a href="#">菜单1</a>
<ul>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单2</a>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单3</a>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<ul>
<li class="main h"><a href="#">菜单1</a>
<ul>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
<li class="main h"><a href="#">菜单2</a>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
<li class="main h"><a href="#">菜单3</a>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".main>a").on("click",function(){
$(this).next("ul").slideToggle(500);
});
由于next是取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合,所以选择要通过$(".main>a")来达到next的同辈元素,<a>的同辈元素是<ul>
$(".main>a").hover(function(){
$(this).next("ul").slideDown(550);
},function(){
$(this).next("ul").slideUp(550);
});
$(".main").hover(function(){
$("ul",this).slideDown(500);
},function(){
$("ul",this).slideUp(500);
});
//$('a','b'),$('子','父'),从父节点中找子节点,并且取值
$(".main").hover(function(){
$(this).children("ul").slideDown(550);
},function(){
$(this).children("ul").slideUp(550);
});
children获得匹配元素集合中每个元素的子元素,选择器选择性筛选。由于是子元素,所以不能通过$(".main>a")来选择
});
</script>
</html>
jQuery下拉菜单
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前言 平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单,并且该菜单要和...