Jquery移动选项卡和可折叠

Jquery mobile tabs and collapsible

本文关键字：可折叠 选项 移动 Jquery      更新时间：2023-09-26

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

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

我有一个例子在

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

我无法在没有孩子的情况下获得标题项来更改选项卡或不展开。此外，默认情况下会显示选项卡内容。

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

感谢您的任何帮助

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

<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;
}

演示

ezanker的答案几乎就在那里。不过，我只是无法让子列表与选项卡一起使用。

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

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/
相关文章：