0

如何在 Jquery Mobile 中使用带有标签的可折叠集？

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

我有一个例子

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

我无法让没有孩子的标题项目更改选项卡或不展开。选项卡内容也默认显示。

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

谢谢你的帮助

4

2 回答 2

0

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

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

演示

于 2014-11-13T18:51:01.147 回答
0

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

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

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/
于 2014-11-13T23:24:24.693 回答