是否可以使用JQuery Mobile在辅助div类中包含可折叠内容？

Question

我正在使用Jquery Mobile创建一个iPad应用程序，并希望使用<div class="content-secondary">创建导航栏，并且该导航栏内部具有可扩展内容

目前我可以在辅助div中创建一个简单的基于<li>的导航，但是当我尝试添加可扩展内容时，它不会按预期呈现 - 只显示扩展内容而没有任何标题或方式崩溃了。尝试创建一个JSFiddle来说明（Fiddle Link），但似乎JSFiddle不支持辅助导航窗格，因为无论我扩展宽度多少它只是呈现为连续页面内容..

如果您按照上面的小提琴链接，您将看到主要内容底部附加的导航栏。可折叠内容渲染得很好。但是，如果您使用相同的代码构建JQuery Mobile网页，您将看到问题。

有些屏幕在下方抓取以突出显示;

当屏幕很窄时 - 导航栏在主体后跟随，折叠工作正常

当屏幕加宽时，导航栏变为活动状态，但可折叠内容的行为类似于列表

有任何建议或想法吗？这是一个已知问题还是设计特征？

由于

Answer 1

Listview可以实现-15px的保证金。我建议您使用自己的样式表覆盖此css并放置在JQM之后并使用此代码段：

.ui-content .ui-listview{margin:-15px -15px 0 -15px;}​

或使用插入列表，因为它不像这样使用-15px边距：

<ul data-role="listview" data-theme="c" data-dividertheme="d" data-inset="true">
    <li><a href="#Link1">Link1</a></li>
    <li><a href="#Link2">Link2</a></li>
    <li><a href="#Link3">Link3</a></li>
</ul>

我希望有所帮助。让我知道是否有任何方法可以为您改进这个答案。

Answer 2

我认为您已经使用了演示文档中的CSS来创建主要辅助视图，因此有一个文件定义了两个内容块的行为（jquery.mobile-1.1中没有“content-secondary”。 0.css）。你会在媒体查询中找到一点如下：

/* fix up the collapsibles - expanded on desktop */
.content-secondary .ui-collapsible-heading {
    display: none;
}
.content-secondary .ui-collapsible-contain {
    margin:0;
}
.content-secondary .ui-collapsible-content {
    display: block;
    margin: 0;
    padding: 0;
}

此部分隐藏标题（阻止您折叠它），并展开可折叠内容。

通过在媒体片段之前包含此部分，您可以覆盖正常的“折叠”行为并强制它始终打开。同样，通过从介质段中删除它，可以强制它在所有宽度/方向上再次折叠。

你需要启用“标题”才能看到它们（因为默认情况下它是隐藏的，如果它的子项被隐藏，你就不能点击任何东西来显示它。你这样做是通过删除该段;

.content-secondary .ui-collapsible-heading {
    display: none;
}

来自所有后续媒体调查的

Answer 3

非常感谢AssidiousBlue。 有同样的问题，并通过评论整个部分修复它：

.content-secondary .ui-collapsible-heading {
    display: none;
}
.content-secondary .ui-collapsible-contain {
    margin:0;
}
.content-secondary .ui-collapsible-content {
    display: block;
    margin: 0;
    padding: 0; 
}

干杯， 阿里克斯