首先，新建一個html界面，然后引入jqueryuijs，jqueryuicss，jquery即可數(shù)字表示的是版本號，只要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實現(xiàn)由一級導航菜單到二級滑動顯示效果，并點擊增加背景變化效果，代碼挺簡單的，但是也效果也很好，是非常實用的，也是很流行的菜單樣式 html 1 2 22 22 lt。

打開網頁時時顯示的 B一級菜單 隱藏的二級菜單項 var a = $quotulmain aquotaonquotclickquot，functione estopPropagation anextslideUp#39fast#39 $ecurrentTarget。

在function內部實現(xiàn)鼠標進入事件，以及所有下拉效果的實現(xiàn)停止播放所有的特效動畫，隱藏子菜單圖為js代碼獲取子集菜單，重新設置菜單位置圖為html代碼停掉子集菜單動作并觸發(fā)下拉圖為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。

鼠標指向或者點擊按鈕出現(xiàn)菜單后，如果要單擊頁面任意位置讓菜單隱藏很簡答可以直接用Jquery，給document對象加一個單擊事件后，用jquery選擇器定位到要隱藏的菜單上，修改css樣式的display為即可示例代碼documentbind。

jquery怎么制作tab菜單的彈窗呢下面我們來看看怎么制作一些彈窗彈窗，下面小編就直接教大家制作tab菜單1打開我的文件打開 ，在頁面中找到插入 ，點擊插入2在選擇視圖中點右鍵排列彈面這樣的話我們就在頁面。

需要通過Jquery來實現(xiàn)這種點擊頁面其他地方隱藏菜單的效果，重要的一點就是需要通過eventstopPropagation來阻止事件冒泡菜單按鈕百度綁定按鈕事件，點擊按鈕可以打開菜單，同時也能關閉按鈕$quotaquotonquotclickquot， function。

核心代碼$thisstopanimatebackgroundPositionquot0 250pxquot， duration500本質是通過JS來切換背景圖片，切換的過程用jqureyanimate 自定義動畫來實現(xiàn) stop 方法作用停止所有在指定元素上正在運行的。

點擊展開或隱藏菜單，最好在菜單前加一個圖標按鈕，美觀又方便如果想像你這樣實現(xiàn)，最好在每一個ul和li加上ID這個ID必須是有規(guī)律的，比如父ID為1_1，子ID1_1_1，用鏈接的點擊事件根據(jù)ID獲取父菜單和子菜單。

它的位置是固定的，所以菜單一直在同一個地方滾動高度設為100%注意，左邊距設置為負數(shù)，使這菜單從視圖中消失為了讓它有一個出現(xiàn)的特效，我們用jquery來了調用另一class來顯示和關閉JavaScript代碼如下$documentreadyfunction。