jquery
折疊菜單可以讓用戶瀏覽網頁時體驗到更好的交互效果，今天我就來講講jquery-ui怎樣制作折疊菜單，希望可以幫助到大家。
工具/材料
電腦
jquery-ui.js,jquery-ui.css，jquery
Hbuilder
操作方法
-
01
首先，新建一個html界面，然后引入jquery-ui.js，jquery-ui.css，jquery即可。數字表示的是版本號，只要jquery的版本是2版本的基本都可以，太高版本的和jqueryui不兼容哦。
-
02
然后我們添加一個div作為折疊菜單的最外層，并且添加id：accordion。然后在里面嵌套h4標簽和div標簽，分別用作菜單欄和菜單內容區域。
-
03
然后設置最外層div的寬度和高度，這個可以根據你自己的情況調整到最合適的效果。
-
04
如圖，預覽一下最初的折疊菜單效果，哈哈，現在這個頁面的菜單還不能折疊，接著開始添加折疊效果。
-
05
如圖，使用("#accordion")來獲取到折疊菜單的最外層容器。
-
06
然后給這個容器添加折疊效果，只要調用accordion方法就可以了，這樣div就具備了折疊菜單的效果。
-
07
接著我們來預覽，可以看到現在菜單一是展開的，而接著我們點擊菜單二，再去看看效果。
-
08
點擊之后，菜單一就會被折疊起來，輪到菜單二展開。也就是說，默認情況下會有一個菜單處于展開狀態。哈哈，到此，折疊菜單就制作完了。
-
09
最后來說說新手可能遇到的問題，如圖，一定不要漏掉紅色框中的rel="stylesheet"，因為連接外部的css文件必須用到它，否則就沒有折疊效果的哦。
- End
- 發表于 2017-10-27 00:00
- 閱讀 ( 625 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章