Question

如何在Jquery Mobile中使用带有选项卡的可折叠集？

在我的页面左侧，我想要一个可折叠的设置作为菜单。有些物品会有孩子，有些则不会。我希望没有孩子的项目直接更改选项卡，但有孩子的项目应该扩展。（在这种情况下，孩子会更改标签）

我在

有一个例子

-- dummy text to get jsfiddle link to submit ?
http://jsfiddle.net/7jg43uLg/3/

我无法获取没有子项的标题项更改标签或不展开。此外，标签内容默认显示。

这是实现我想要的结果的更好方法吗？

感谢您的帮助

Answer 1

您可以将菜单构建为列表视图，以便没有子项的项目是常规列表项，带子项的项目是列表项目中的可折叠项目：

<ul data-role="listview" id="menu">
    <li><a href="#">Location</a></li>
    <li><a href="#">Product</a></li>
    <li>
        <div data-role="collapsible">
            <h4>Community Facilities</h4>
            <p>
         <ul data-role="listview" data-inset="false">
            <li><a data-transition="pop" href="#cat">Cat</a></li>
            <li><a data-transition="pop" href="#dog">Dog</a></li>
        </ul>
            </p>
        </div>                                
    </li>       
</ul>

然后你可以覆盖一些默认的CSS来摆脱额外的填充和边距：

#menu >.ui-li-static {
    padding: 0 !important;
    border: 0;
}
#menu .ui-li-static .ui-collapsible {
    margin: 0 !important;
    border-radius: 0;
    border: 0 !important;
}
#menu .ui-li-static .ui-collapsible-heading {
    margin: 0 !important;
}
#menu .ui-li-static .ui-collapsible-content {
    padding-top: 0;
    padding-bottom: 0;
}

<强> DEMO

Answer 2

ezanker的回答几乎就在那里。我无法让这些子列表与标签一起使用。

最后，我在没有标签的情况下推出了自己的解决方案。

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/

Jquery移动标签和可折叠

2 个答案: