jquery mobile实现可折叠的导航按钮
本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码，供大家参考，具体内容如下
功能：
当功能较多时，创建可折叠分组导航按钮。只需指定 data-role=" collapsible "创建可折叠面板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可折叠的导航面板</title> <!--使用名为viewport的meta值，其content指定自适应设备的宽度--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>图书查阅系统</h1> </div> <!--创建一个可折叠的导航面板--> <div data-role="content"> <div data-role="collapsible" data-theme="e"> <h4>文学历史</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明代</a></li> <li><a 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 data-role="collapsible" data-theme="b" data-collapsed="false"> <h4>人文社科</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >财务</a></li> <li><a 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 data-role="collapsible" data-theme="e"> <h4>计算机应用</h4> <ul data-role="listview"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >软件开发</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据库</a></li> <li><a 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> <div data-role="footer" data-position="fixed"> <h1>请单击“+”按钮进行展开</h1> </div> </div> </body> </html>
代码分析：
通过data-role=" collapsible "创建可折叠的div，再在其中通过 data-role=" listview "创建列表框
data-theme : 指定预定义样式 （也可以使用样式构建器创建自定义样式）
data-collapsed="false" : 表示默认不折叠
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
当导航栏崩溃时，我想让我的搜索栏可见。 我的代码：http://jsfiddle.net/edalzell/a3yng825/1/折叠时工作，但展开时显示两个搜索栏。 HTML:
-
问题内容： 我在导航栏中做了一些修改，但是现在切换按钮在单击时没有响应。下面是我的代码。我哪里错了?? 码： 问题答案： 您需要更改此标记 改变 至 原因：的值是关联的nav div的任何类名。在这种情况下
-
问题内容： 这是我简单的导航栏： 我只是想防止这种情况崩溃，因为我不需要它，怎么办？ 我想避免编写30万行CSS来覆盖默认样式。 有什么建议吗？ 问题答案： 经过仔细检查，没有30万行，但是您需要覆盖大约3-4个CSS属性： 这样，您的菜单就不会折叠。 说明 四个CSS属性分别执行以下操作： 引导程序中的默认属性隐藏平板电脑（风景）和电话菜单的右侧，而是显示一个切换按钮以隐藏/显示它。因此，此属性
-
我使用Bootstrap4创建了这个可折叠的导航栏，它工作得很好，但我希望在用户单击链接时关闭它。有办法吗？谢谢 html导航栏： css用于。图标栏，因为引导程序4不使用图标栏类。
-
本文向大家介绍javascript实现 百度翻译 可折叠的分享按钮列表，包括了javascript实现 百度翻译 可折叠的分享按钮列表的使用技巧和注意事项，需要的朋友参考一下 自从开始学习前端后，平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O，不知大家有没有这个感觉。接下来就和大家分享一个，原控件来自百度翻译右下方，大家仔细找找应该能找到，如图所示： 感觉蛮有意思的，实现起来也不复
-
问题内容： 我使用Bootstrap 4很好地创建了这个可折叠的导航栏，但是我希望当用户单击链接时将其关闭。有什么办法吗？谢谢 html导航栏： .icon-bar的css，因为Bootstrap 4不使用icon-bar类。 问题答案： 您可以像这样将组件添加到链接。 或者 ，（也许是一种更好的方法）像这样使用jQuery。