工具/材料
电脑
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
