jquery实现的简单二级菜单效果代码

本文实例讲述了jquery实现的简单二级菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于jquery实现的二级菜单，研究了这么多天，才学会用jquery写一个菜单，也算是对自己的鼓励吧，自我感觉这个菜单很不错，欢迎朋友们指点江山。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-simple-2l-menu-style-demo-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejquery二级菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # container。菜单1 ul Li’.单击(function(){ var index=$(' # container。菜单1 ul Li’.索引（这个);$(这个)。addClass('bg ').兄弟姐妹()。移除CLaSS()；$('#container .menu2 ul li ul ').eq(指数)。显示()。父项()。兄弟姐妹('里').儿童(' ul ').hide()；})})/脚本样式类型=' text/CSS '正文{ margin :0划水：0;字体系列： '宋体；font-size :9 ptcolor : # FFFFFFfont-weight : bold } #容器{ width :800 pxh three : auto margin :0 auto order :1 px # 1025 c0 solid } #容器菜单1 {宽度：800px高度：40 pxborder : none background : URL(图像/菜单1。gif)无重复} #容器。菜单1 ul { margin :0划水：0;位置：相对；填充-top :5 px；} #容器。菜单1 ul Li {左浮动：填充-左侧：10 px高度：35px宽度：80 px线高：35 px列表式：无；文本对齐：居中；光标：指针} #容器菜单2 {宽度：800 px高：35pxborder:none背景色： # 333333;} #容器。菜单2 ul { margin 33600padding:0 } #容器。线高：35 px列表式：无；float:leftcursor :指针} #容器菜单2 ul Li ul Li { float : left左填充左侧：20像素8:35像素线高：35 pxlist-style:none} .bg{背景色：#333333}。隐藏{ display : none }/style/headdydiv id=' container ' div class=' menu 1 ' ulli class=' BG '第一栏/莉莉第二栏/莉莉第三栏/莉莉第四栏/莉莉第五栏/Li/ul/div class=' men U2 ' ulliulli第一栏/莉莉第一栏/莉莉第一栏/li/ul/liliul class='hide'li第二栏/莉莉第二栏/莉莉第二栏/li/ul/liliul class='hide'li第三栏/莉莉第三栏/莉莉第三栏/li/ul/liliul class='hide'li第四栏/莉莉第四栏/莉莉第四栏/li/ul/liliul class='hide'li第五栏/莉莉第五栏/莉莉第五栏/li/ul/li/ul/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。