<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>菜单收放</title>
<script type="text/javascript" src="class library/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#nav,#content').mouseover(function(){
$('#content').css('display','block');
}).mouseout(function(){
$('#content').css('display','none');
});
/*$('#content').mouseover(function(){
$('#content').css('display','block');
}).mouseout(function(){
$('#content').css('display','none');
});*/
});
</script>
<style>
#head{ margin:0 auto; width:500px; border:1px solid #000;}
#nav{ margin:0 auto; font-size:20px; color:#fff; background:#333; height:40px; text-align:center; line-height:40px;}
#content{ margin:0 auto; list-style-type:none; color:#333; height:260px; background:#ccc; display:none; }
#content li{ padding-top:20px; font-size:14px; line-height:180%; margin-left:-15px;}
</style>
</head>
<body>
<div id="head">
<p id="nav">最近浏览</p>
<ul id="content">
<li> 1,基本语法:
$(选择器).方法(function(){});
举例:
$('button').click(function(){ alert('####');});
$是jQuery 的简写
</li>
<li> 2,连缀方法:
$(选择器).方法(function(){}).方法(function(){})...;
$('div').click(function(){
//写代码
}).mouseover(function(){
//写代码
});
</li>
</ul>
</div>
</body>
</html>
收放菜单
最新推荐文章于 2023-03-28 20:03:08 发布