jquery写的两级滑出菜单

最新推荐文章于 2020-09-28 03:10:34 发布

何麒

最新推荐文章于 2020-09-28 03:10:34 发布

阅读量748

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/liulangdeshusheng/article/details/16940819

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li{float: left;list-style: none;cursor: pointer;width: 40px;text-align: center;}

div.ss{z-index: 20;border: 1px solid silver;height: 60px;position: absolute;background:silver;}
div.ss div{text-align: center;}
div.ss div:HOVER{cursor: pointer;background-color: yellow}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var div = document.createElement("div");
var div2 = document.createElement("div");
$(function(){
div.className = "ss";
div2.className = "ss";
document.body.appendChild(div);
document.body.appendChild(div2);
$(div).append("<div>aa</div><div>bb</div>");
$(div).hide();
$(div2).hide();
});

$(function(){
$('li').mouseover(function(){
var obj=$(this).offset();
var xobj=obj.left+"px";
var yobj=obj.top+this.offsetHeight-1+"px";
$(div).css("width",this.offsetWidth);
$(div).css('top',yobj);
$(div).css('left',xobj);
$(div).show();
}).mouseout(function(){
$(div).hide();
})

$(div).mouseover(function(){
$(this).show();
}).mouseout(function(){
$(this).hide();
});

$('div.ss div').mouseover(function(){
$(div2).show();
$(div).show();
var obj=$(this).offset();
var xobj=obj.left+this.offsetWidth-1+"px";
var yobj=obj.top+"px";
$(div2).css("width",this.offsetWidth);
$(div2).css('top',yobj);
$(div2).css('left',xobj);
$(div2).show();
$(div).show();
}).mouseout(function(){
$(div).hide();
$(div2).hide();
})

$(div2).mouseover(function(){
$(div).show();
$(this).show();
}).mouseout(function(){
$(div).hide();
$(this).hide();
});

});

</script>
</head>
<body>


<ul style="display: inline;">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>

</body>

</html>

offset()方法获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

何麒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写的两级滑出菜单

Insert title hereli{float: left;list-style: none;cursor: pointer;width: 40px;text-align: center;}div.ss{z-index: 20;border: 1px solid silver;height: 60px;position: absolute;background:silver
复制链接

扫一扫

专栏目录