关于用jquery制作弹出式菜单的问题
想做一个带弹出菜单的导航鼠标移动到一个li然后出来菜单li和菜单css都已经做好了我用jquery触发鼠标事件时发现只能做到鼠标离开菜单菜单隐藏如果我想做出离开li而且鼠...
想做一个带弹出菜单的导航 鼠标移动到一个 li 然后出来菜单 li 和 菜单 css都已经做好了 我用jquery触发鼠标事件时发现 只能做到鼠标离开菜单 菜单隐藏 如果我想做出离开li而且鼠标不在子菜单区域隐藏子菜单 不知道怎么做了
如果离开 li 但是鼠标在子菜单区域 就不隐藏子菜单 展开
如果离开 li 但是鼠标在子菜单区域 就不隐藏子菜单 展开
展开全部
把子菜单放在li里面
<!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=gb2312" />
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
li { list-style:none;}
.o .r { float:left; width:100px; height:30px; border:1px solid #CCCCCC;}
.r ul { display:none; background:#999999;}
.hover ul{ display:block;}
</style>
<ul class="o">
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a></li>
</ul>
<script>
$(".o > .r").hover(
function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}
);
</script>
</body>
</html>
<!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=gb2312" />
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
li { list-style:none;}
.o .r { float:left; width:100px; height:30px; border:1px solid #CCCCCC;}
.r ul { display:none; background:#999999;}
.hover ul{ display:block;}
</style>
<ul class="o">
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a></li>
</ul>
<script>
$(".o > .r").hover(
function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}
);
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(".menu").mouseover(function(){
$(this).find(".list").removeClass("hide");
});
$(".menu").mouseout(function(){
$(this).find(".list").addClass("hide");
});
.hide{display:none}
.menu .list{
position: absolute;
z-index: 99;
background: #EEE;
}
参考：http://hi.baidu.com/%D0%A1%CE%C4_%BC%C6%CB%E3%BB%FA/blog/item/1dff1a17b6333a1d5baf53f8.html
$(this).find(".list").removeClass("hide");
});
$(".menu").mouseout(function(){
$(this).find(".list").addClass("hide");
});
.hide{display:none}
.menu .list{
position: absolute;
z-index: 99;
background: #EEE;
}
参考：http://hi.baidu.com/%D0%A1%CE%C4_%BC%C6%CB%E3%BB%FA/blog/item/1dff1a17b6333a1d5baf53f8.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
