首先，新建一个html界面，然后引入jqueryuijs，jqueryuicss，jquery即可数字表示的是版本号，只要jquery的版本是2版本的基本都可以，太高版本的和jqueryui不兼容哦然后我们添加一个div作为折叠菜单的最外层，并且添加i。

参考下面代码 documentreadyfunction quot#wenzhangdddlddquothideeach$quot#wenzhangdddldtquot， function thisclickfunction quot#wenzhangdddldd quotnot$thisnext。

简单写了一个，仅供参考 lt！doctype tree li tree li uldisplay function var $tree = $quot#treequot获取tree var $a_tops = $treechildrenquotliquotchildrenquotaquot找到tree。

jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式 html 1 2 22 22 lt。

打开网页时时显示的 B一级菜单 隐藏的二级菜单项 var a = $quotulmain aquotaonquotclickquot，functione estopPropagation anextslideUp#39fast#39 $ecurrentTarget。

在function内部实现鼠标进入事件，以及所有下拉效果的实现停止播放所有的特效动画，隐藏子菜单图为js代码获取子集菜单，重新设置菜单位置图为html代码停掉子集菜单动作并触发下拉图为css代码主菜单的鼠标移出动作。

quotul liquothoverfunction thisfindquotdivquotshow，function thisfindquotdivquothide。

那代码如下#39body#39clickfunction $#39#nav#39hide例如要隐藏的菜单的id为nav，要点击的地方id名为content，那代码如下#39#content#39clickfunction $#39#nav#39hide。

用hover方法，或者你这个也可以，包住就可以了，下面hover方法 var gy=$quot#gyquotvar classgy=$quotgyquotgyhoverfunction thiscssquotbackgroundImagequot，quoturlimageshover_1pngquot这里注意应该back。

鼠标指向或者点击按钮出现菜单后，如果要单击页面任意位置让菜单隐藏很简答可以直接用Jquery，给document对象加一个单击事件后，用jquery选择器定位到要隐藏的菜单上，修改css样式的display为即可示例代码documentbind。

jquery怎么制作tab菜单的弹窗呢下面我们来看看怎么制作一些弹窗弹窗，下面小编就直接教大家制作tab菜单1打开我的文件打开 ，在页面中找到插入 ，点击插入2在选择视图中点右键排列弹面这样的话我们就在页面。

需要通过Jquery来实现这种点击页面其他地方隐藏菜单的效果，重要的一点就是需要通过eventstopPropagation来阻止事件冒泡菜单按钮百度绑定按钮事件，点击按钮可以打开菜单，同时也能关闭按钮$quotaquotonquotclickquot， function。

核心代码$thisstopanimatebackgroundPositionquot0 250pxquot， duration500本质是通过JS来切换背景图片，切换的过程用jqureyanimate 自定义动画来实现 stop 方法作用停止所有在指定元素上正在运行的。

点击展开或隐藏菜单，最好在菜单前加一个图标按钮，美观又方便如果想像你这样实现，最好在每一个ul和li加上ID这个ID必须是有规律的，比如父ID为1_1，子ID1_1_1，用链接的点击事件根据ID获取父菜单和子菜单。

它的位置是固定的，所以菜单一直在同一个地方滚动高度设为100%注意，左边距设置为负数，使这菜单从视图中消失为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭JavaScript代码如下$documentreadyfunction。