jquery下拉菜单效果学习

最新推荐文章于 2021-05-17 10:10:05 发布

球球之家/carver

最新推荐文章于 2021-05-17 10:10:05 发布

阅读量1.1k

点赞数 2

分类专栏：前端开发文章标签： jquery function class xhtml javascript float

本文链接：https://blog.csdn.net/wm5920/article/details/7761595

版权

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>jquery</title>

<style type="text/css">
ul{
float:left


}
li{
list-style-type:none;
}
ul ul li{


}
</style>
<script src="jquery-1.4.3.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){ 
    $("ul li").next("ul").hide();
	
    $("ul li").mouseover(function()
    {
     $(this).next("ul").slideDown();
    });
	
	 $("ul ul").mouseleave(function()
    {
     $(this).slideUp();
    });
	
    $('ul ul li').mouseover(function(){
		$(this).css('background-color','red');
	});
	
	$('ul ul li').mouseout(function(){
		$(this).css('background-color','white');
	});
})
	
</script>
</head>

<body>

      <ul >
        <li>one</li>
        <ul >
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </ul>
      <ul >
        <li>two</li>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </ul>
	  <ul >
        <li>three</li>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </ul>

</body>
</html>

上面是一个下拉菜单效果的源码，效果图如下：

提出如下问题：

1.为什么要用$(document).ready()事件？

--不用不行，呵呵。

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

2.$("ul ul").mouseleave()改成mouseout为啥不行？

大家知道事件的冒泡特性，在上面的BUG中也正是因为这个冒泡特性，对于mouseover事件来说，当鼠标从其他元素移动到 child节点时发生，但此事件会冒泡所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听，从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。

对于 mouseover 和mouseenter 两个事件最大的区别就是 mouseenter 是不冒泡的事件，这时候如果注册的监听是mouseenter的话无论鼠标从任何元素移动到child时只有child元素发生mouseenter事件而其祖宗节点都不会因为冒泡而触发此事件。

3.你能让1、2、3与one对齐吗？

改成如下排列，以li为单位

<ul>
	    <li><a href="#">AAAAA</a>
	        <ul >
				<li><a href="#">11</a></li>
				<li><a href="#">22</a></li>
				<li><a href="#">33</a></li>
				<li><a href="#">44</a></li>
		</ul>
	    </li>

</ul>

下面是相对强大点的实例

<!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">
<head>
<script src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.meun').hover(function(){
     $(this).find('ul').stop(true,true).slideDown();
      },function(){$(this).find('ul').stop(true,true).slideUp('fast');
    })
}) 
</script>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#333;font-size:14px;}
ul{list-style:none;}
.nav{display:inline-block;margin:20px;height:30px;line-height:30px;background:#eee;}
.meun {float:left;position:relative;}
.meun a{display:inline-block;padding:0 10px;}
.meun a:hover{background:#333;}
.meun a:hover{color:#fff;}
.meun ul{display:none;position:absolute;left:0;top:30px;width:100px;background:#eee;border:1px solid #d3d3d3}
.meun ul a{display:block;}
</style>
</head>
<body>
<div class="nav">
     <ul>
	    <li class="meun in1"><a href="#">AAAAA</a>
	        <ul id="sub_01" class="sub" >
				<li><a href="#">11</a></li>
				<li><a href="#">22</a></li>
				<li><a href="#">33</a></li>
				<li><a href="#">44</a></li>
			</ul>
	    </li>
		<li class="meun in2"><a href="#">BBBBB</a>
			<ul id="sub_01" class="sub" >
				<li><a href="#">11</a></li>
				<li><a href="#">22</a></li>
				<li><a href="#">33</a></li>
				<li><a href="#">44</a></li>
			</ul>
		</li>
		<li class="meun in1"><a href="#">CCCCC</a>
	        <ul id="sub_01" class="sub" >
				<li><a href="#">11</a></li>
				<li><a href="#">22</a></li>
				<li><a href="#">33</a></li>
				<li><a href="#">44</a></li>
			</ul>
	    </li>

	 </ul>
  </div>
  
</body></html>

我觉得这个可移植性很好，比较清晰。。。。

球球之家/carver

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
jquery下拉菜单效果学习

jqueryul{float:left}li{list-style-type:none;}ul ul li{}$(document).ready(function(){ $("ul li").next("ul").hide(); $("ul li").mouseover(function() { $(this).next
复制链接

扫一扫