Jquery实现的下拉菜单

最新推荐文章于 2023-09-25 07:38:35 发布

shiyunge

最新推荐文章于 2023-09-25 07:38:35 发布

阅读量941

点赞数

分类专栏： CSS+DIV+js 文章标签： jquery function class html menu

本文链接：https://blog.csdn.net/shiyunge/article/details/4522734

版权

CSS+DIV+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
}