Jquery实现的下拉菜单

来源：互联网发布：js 爬虫抓取网页数据编辑：程序博客网时间：2024/05/01 07:01

Jquery实现的下拉菜单，如图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
$().ready(function(){
$(".menuTitle").mouseover(function(){$(this).addClass("mouseOver")}).mouseout(function(){$(this).removeClass("mouseOver")});

//$(".menuList li").mouseover(function(){$(this).addClass("mouseOver2")}).mouseout(function(){$(this).removeClass("mouseOver2")});

$(".menuList li").hover(function(){$(this).addClass("mouseOver2");},function(){$(this).removeClass("mouseOver2");});

$(".menuTitle").toggle(function(){
  var index=$(".menuTitle").index($(this));
  $(".menuTitle + li").eq(index).hide();

  },function(){
  var index=$(".menuTitle").index($(this));
  $(".menuTitle + li").eq(index).show();

  });

});
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size:12px;
}
#Menu
{
margin:0px;
padding:0;
list-style:none;
}
#Menu li
{
margin:0;
padding:2px 10px;
}

.menuTitle
{
font-size:12px;
font-weight:bold;
line-height:20px;
cursor:hand;
}

.menuList
{
margin:0 10px;
list-style:none;
font-size:12px;
cursor:hand;
}
.menuList li
{
line-height:20px;
border-bottom:#ccc 1px dashed;
}

.mouseOver
{
background-color:#eeeeee;
}
.mouseOver2
{
background-color:#FFFFCC;
}
-->
</style>

</head>

<body>

</li>
<li class="menuTitle">菜单3</li>
</ul>

</body>
</html>