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

【问题标题】：Is it possible to have collapsible content inside a secondary div class with JQuery Mobile?是否可以使用 JQuery Mobile 在辅助 div 类中包含可折叠的内容？
【发布时间】：2012-04-08 23:47:53
【问题描述】：

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

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

如果您点击上面的 Fiddle 链接，您将看到附加到主要内容底部的导航栏。可折叠的内容渲染得很好。但是，如果您使用相同的代码构建一个 JQuery Mobile 网页，您就会发现问题。

下面的一些屏幕抓取以突出显示；

当屏幕狭窄时 - 导航栏跟随主体，折叠效果很好

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

有什么建议或想法吗？这是已知问题还是设计功能？

谢谢

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

我假设您已经使用演示文档中的 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;
}

来自所有后续媒体查询

【讨论】：

【解决方案2】：

Listview 的边距为 -15px。我建议您使用放置在 JQM 之后的自己的样式表覆盖此 css 并使用此 sn-p：

.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>

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

【讨论】：

有用的建议，但不确定这是否真的解决了问题。添加了一些屏幕截图以突出显示。正如您所看到的，一旦屏幕足够宽，可以将辅助内容安排为导航栏，可折叠标题就会消失，内容就像列表一样
好吧，你对我的问题有所改变。嗯，让我看看。

【解决方案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; 
}

干杯，亚历克斯

【讨论】：