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
- 阅读 ( 629 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章