如何使用Jquery Mobile实现两级侧边栏导航

Question

我想使用JQuery Mobile在侧边栏中实现两级导航。

通过解释我想要实现的目标，考虑我有3个类别链接，并且（例如）每个类别中有3个链接

第1类    - 链接1    - 链接2    - 链接3

第2类    - 链接1    - 链接2    - 链接3

第3类    - 链接1    - 链接2    - 链接3

并希望在某种程度上避免让用户浏览两个链接以尝试访问任何一个页面。

我尝试了一些使用这条路线的途径;

1. 使用data-role =“collapsible”，尝试为侧边栏中的每个类别创建标题，其中任何用户都可以展开以点击第二级链接

2. 使用一系列选择下拉列表（针对每个类别）和javascript以在选择任何选项时触发页面更改

问题在于，虽然两种方法在“主要内容”页面中使用时效果都很好，但只要我将它们放在内容辅助容器中，它们都不起作用（可折叠内容总是被扩展，并且javascript似乎没有开火）

任何人都可以建议（a）解决上述问题的解决方案，或者（b）另一种方法来修饰这只猫吗？

编辑： 您可以看到我之前的帖子试图解决辅助块内的可碰撞问题; Is it possible to have collapsible content inside a secondary div class with JQuery Mobile?

还有一个带有示例代码的JSFiddle http://jsfiddle.net/vinomarky/xfcdF/，虽然Fiddle似乎不适用于辅助div，所以即使你展开窗口它也不会正确渲染侧边栏

Answer 1

请参阅我之前主题的建议。做你似乎想做的事情;

1. 包括您用于定义辅助内容的样式表 在JS中提琴小提琴
2. 删除显示折叠内容的部分
3. 删除隐藏collapsible-headers
的部分

通过： JSFiddle （请原谅CSS中的一些变化 - 它来自我自己的项目