移入显示div用js实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq弹出div演示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
menuA();
//menuB();
});
//实现方法A
function menuA(){
$('#menu>li').hover(function(){
$(this).children('a').toggleClass('sel');
$(this).children('.hm').toggle();
});
}
//实现方法B
function menuB(){
var timer;
$('#menu>li>a').hover(function(){
var obj=$(this).addClass('sel').next('.hm').show();
},function(){
var obj=$(this);
timer=setTimeout(function(){
obj.removeClass('sel').next('.hm').hide();
},50);
});
$('#menu>li>.hm').hover(function(){
clearTimeout(timer);
},function(){
$(this).hide().prev('a').removeClass('sel');
});
}
</script>
<style>
* { font-size: 12px; font-family: microsoft yahei; margin:0; border:0; padding:0;}
#menu { background: #eee; border: 1px solid #ddd; line-height: 30px; height: 30px; width: 600px; margin: 10px auto;}
#menu li { float: left; position: relative; width: 81px; text-align: center; list-style:none;}
#menu li a { float: left; width: 80px; color: #666; background: #eee; border-right: 1px solid #ddd; font-size: 14px;font-weight: bold; text-decoration:none;}
#menu li a.sel { background: #f9f9f9;}
#menu li .hm { display:none; position: absolute; top: 30px; left:-1px; border: 1px solid #ddd; border-top:none;}
#menu li .hm a { border:none; font-size: 12px; font-weight: normal; background: #f9f9f9;}
#menu li a:hover,#menu li .hm a:hover { color: #c00; background: #fff;}
</style>
<head>
<body>

<div id="menu">
<li>
<a href="#">目录1</a>
<div class="hm">
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</div>
</li>
<li>
<a href="#">目录2</a>
<div class="hm">
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</div>
</li>
<li>
<a href="#">目录3</a>
<div class="hm">
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</div>
</li>
<li>
<a href="#">目录4</a>
<div class="hm">
<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
</div>
</li>
</div>

</body>
</html>

posted @ 2020-06-01 17:56  泉城余文乐  Views(252)  Comments(0)    收藏  举报