最终要达到的效果如图所示：

当您单击菜单项时，您可以折叠和展开菜单，这是我们在网页上经常看到的效果。这里实现的主要应用是CSS控件样式，然后用jquery实现。我自己的想法：这里举个例子，绑定页面跳转只是静态绑定，不是动态绑定。我在开发过程中使用的动态绑定是结合ASP.NET的treeview控件实现的。不知道有没有更好的办法。前台页面代码：

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' menu . aspx . cs ' Inherits=' menu ' %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' Head runat=' server ' title/title script src=' http : js/jquery-1 . 9 . 1 . min . js ' type=' text/javas

ul，Li { list-style-type : none；/*不加边距，搜狗浏览器中不能左对齐*/margin :0 px；padding:0px} .main { background-image: url('./images/title . gif ')；背景-repeat : repeat-x；宽度width:100px} .main a { background-image:url('./images/collapsed . gif ')；背景-repeat : no-repeat；背景-位置：3px中心；文本装饰： none；颜色：白色；/*以下用于保证鼠标只要停留在li上就能做出响应，相当于扩展了li */display:block的响应区域；左填充left:20px填充-bottom :3 px；} Li { background-color : # EEEEEEE；} .主阿利{ color:Black背景-image : none；} menu.js:

///引用路径='jquery-1.9.1.min.js'/$(文档)。ready(function () { var main=$(')。maina’)；main . click(function(){ var ULnode=$(this))。下一个(' ul ')；//if(ulnode . CSS(' display ')==' none '){//ulnode . CSS(' display '，' block ')；//}//else {//ulnode . CSS(' display '，' none ')；//}//百叶窗的效果ulnode . slide toggle(' normal ')；});});这个例子是前一个例子的延续。让我们先来看看我们想要达到的最终效果：

我们这次想要达到的效果是这样的。当鼠标滑动到菜单项时，显示子菜单；当鼠标移开时，菜单就收起来了。在这里，我们也解决了推拉门中的问题，即当鼠标快速滑动时，会不断触发。该页面的代码如下：

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' menu。aspx。cs“Inherits=”菜单“%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title script src=' http : js/jquery-1。9 .1 .量滴js ' type=' text/javas菜单项1/a ul lia href='# '子菜单11/a/li lia href='# '子菜单12/a/Li/ul/Li Li class=' main ' a href=' # '菜单项2/a ul lia href='# '子菜单21/a/li lia href='# '子菜单22/a/Li/ul/Li Li class=' main ' a href=' # '菜单项3/a ul lia href='# '子菜单31/a/li lia href='# '子菜单32/a/Li/ul/Li/ul/div style=' margin-top :50 px；ul li class='hmain' a href='# '菜单项1/a ul lia href='# '子菜单11/a/li lia href='# '子菜单12/a/Li/ul/Li Li class=' hmain ' a href=' # '菜单项2/a ul lia href='# '子菜单21/a/li lia href='# '子菜单22/a/Li/ul/Li Li class=' hmain ' a href=' # '菜单项3/a ul lia href='# '子菜单31/a/li lia href='# '子菜单32/a/Li/ul/Li/ul/div/form/body/html CSS(菜单。CSS)

ul，Li { list-style-type : none；/*如果不加边缘在搜狗浏览器中不能左对齐*/边距：0 pxpadding:0px }。主要的，主要的.hmain { background-image: url('./图片/标题。gif ')；背景-重复：次重复-x；宽度宽度：100px}。主a .hmain { background-image : URL('./images/折叠。gif ')；背景-重复：不重复；背景-位置：3px中心；文本装饰：无；颜色：白色；/*下面是用来保证鼠标只要停留在里上就可以响应，也就相当于让里的响应区域扩充了*/显示：块；左填充左侧：20像素填充-底部：3 px}李{底色： # EEEEEEE} .阿利大街。阿利{颜色：黑色背景-图像：无；} .主ul .hmain ul { display:none} /*横向菜单的样式*/.hmain { float:left} menu.js

///引用路径='jquery-1.9.1.min.js'/$(文档)。ready(function () { var main=$(').maina’)；主要的。单击(function(){ var ULnode=$(this)).下一个(' ul ')；//if(ulnode。CSS(' display ')==' none '){//ulnode。CSS('显示'，'块')；//}//else {//ulnode。CSS('显示'，'无')；//} //百叶窗的效果ulNode.slideToggle("正常");});//现在的这个变量用来解决鼠标快速滑动问题clearInterval(setTimeoutId)；nodeLi.children('ul ')。向上滑动()；var setTimeoutId$(')。hmain ').hover(function(){ var nodeLi=$(this)；setTimeoutId=window。settimeout(function(){ nodeli。儿童.向下滑动()；}, 300) }, //上面的函数是鼠标进入的操作，下面的操作是鼠标移出的操作function () { //开始的时候，我在这里犯了一个错误，应该重新定义一下nodeLi var nodeLi=$(this)；clear time out(setTimeoutId)；if (nodeLi.children('ul ').长度！=0) { nodeLi.children('ul ').向上滑动()；};});});以上两种菜单效果，大家有没有掌握，希望这篇文章可以帮助到大家。