1

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

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

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

下面的一些屏幕截图以突出显示；

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

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

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

谢谢

4

3 回答 3

1

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

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

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

于 2012-04-09T02:05:19.973 回答
1

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

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

来自所有随后的媒体询问

于 2012-04-18T11:50:14.787 回答
1

非常感谢 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; 
}

干杯，亚历克斯

于 2012-04-29T09:23:03.613 回答