1、首先将页面的内容布局出来，如下图所示，运用ul元素进行导航布局
2、然后给布局添加一些样式，如下图所示，主要是去掉ul的list-style-type
3、接着书写布局里添加的样式，主要是标题以及内容的显示样式，如下图所示
4、接下来导入所需要的jquery库文件，如下图所示，版本自己选择
5、然后就是需要给标题添加绑定事件了，如下图所示，在页面加载完毕给其绑定上
6、最后运用jquery的级联操作，在点击标题的时候对内容进行隐藏或者显示，如下图所示
7、综上所述，jquery制作手风琴效果主要是运用了jquery对相应内容进行显示与隐藏的控制