jquery mobile实现可折叠的导航按钮

本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码，供大家参考，具体内容如下

功能：

当功能较多时，创建可折叠分组导航按钮。只需指定数据角色='可折叠'创建可折叠面板

！DOCTYPE html html head meta charset=' utf-8 ' title可折叠的导航面板/title！-使用名为视口的自指的值，其内容指定自适应设备的宽度-meta name=' viewport ' content=' width=device-width，initial-scale=1' link rel='样式表href=' http://代码。jquery。com/mobile/1。3 .2/jquery。移动一号。3 .2 .量滴CSS ' script src=' http :http://代码。jquery。com/jquery-1。8 .3 .量滴js '/脚本src=' http 3360http://代码.图书查阅系统/h1 /div！-创建一个可折叠的导航面板- div数据-角色='内容差异数据-角色='可折叠'数据-主题='e' h4文学历史/h4 ul数据-角色=' listview ' lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '明代/a/Li lia rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '宋代/a/li /ul /div！ -显示人文社科的可折叠面板- div数据-角色='可折叠'数据-主题='b '数据-折叠='false' h4人文社科/h4 ul数据-角色=' listview ' lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '财务/a/Li lia rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '心理/a/li /ul /div！ -显示计算机应用的可折叠面板- div数据-角色='可折叠'数据-主题='e' h4计算机应用/h4 ul数据-角色=' listview ' lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '软件开发/a/Li lia rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '数据库/a/Li lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '移动开发/a/li /ul /div /div数据-角色="页脚"数据-位置="固定“h1请单击" "按钮进行展开/h1 /div /div /body /html代码分析：

通过数据角色='可折叠'创建可折叠的div，再在其中通过数据角色=' listview '创建列表框数据主题：指定预定义样式（也可以使用样式构建器创建自定义样式)数据-折叠='false' :表示默认不折叠

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。