是否可以使用JQuery Mobile在辅助div类中包含可折叠内容？ [英] Is it possible to have collapsible content inside a secondary div class with JQuery Mobile?

问题描述

我正在使用Jquery Mobile创建一个iPad应用，并希望使用< div class =content-secondary> 创建一个导航栏，并且在导航栏里面有可扩展的内容

I'm creating an iPad app using Jquery Mobile, and would like to create a navigation bar using <div class="content-secondary">, and inside that navigation bar have expandible content

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

As it stands I can create a simple <li> based navigation inside the secondary div, but when I try to add expandible content, it does not render as expected - simply showing the expanded content without any header or way to collapse it. Have tried to create a JSFiddle to illustrate (Fiddle Link), but it seems that JSFiddle does not support secondary navigation panes, as no matter how much I expand the width it simply renders as continuous page content..

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

If you follow the Fiddle link above, you will see the navigation bar appended to the bottom of the main content. The collapsible content renders just fine. But if you construct a JQuery Mobile web page with the same code you will see the problem.

一些屏幕抓取以下突出显示;

Some screen grabs below to highlight;

当屏幕很窄时 - 主体后面的导航条跟随，折叠工作得很好

When screen is narrow - Nav bar follows after main body, collapse works just fine

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

When screen widened, Nav bar becomes active but collapsible content behaves like a list

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

Any advice or thoughts? Is this a known problem or a design feature?

谢谢

推荐答案

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

I presume you have used the CSS from the demo doc to create the primary secondary view, and thus have a file defining the behaviour of the two content blocks (there is no "content-secondary" in jquery.mobile-1.1.0.css). You will find a bit in the media queries like this:

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

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

This section hides the header (preventing you from collapsing it), and expands the collapsible content.

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

By including this section prior to the media segments, you override the normal "Collapsing" behaviour and force it to always be open. Likewise, by removing it from the media segments, you force it to collapse again, on all widths / orientations.

你需要启用标题以便能够看到它们（因为默认情况下它是隐藏的，如果它的子项被隐藏，你可以'点击任何内容即可显示它。你可以通过删除细分来实现这一点;

You will need to enable the "heading" to be able to see them, though (because by default it is hidden, and if its children are hidden, you can't click on anything to show it. You do this by removing the segment;

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

这篇关于是否可以使用JQuery Mobile在辅助div类中包含可折叠内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！