在 JQuery Mobile 中使可折叠集合的功能具有响应性答案

【问题标题】：Making features of collapsible sets responsive in JQuery Mobile在 JQuery Mobile 中使可折叠集合的功能具有响应性
【发布时间】：2013-02-20 09:00:58
【问题描述】：

我正在设计一款适用于台式机、平板电脑和手机的应用。

我想在桌面浏览器和 ipad 横向中插入一些可折叠的内容，但不想在平板电脑纵向和手机上插入。

我的其他响应式元素可以正常工作，但以下 html 和 CSS 无法正常工作：

HTML

<div id="storagePage" data-role="page" data-theme="a">
   <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
       <h2>Header 1</h2>
       <p>Content here</p>
   </div>
</div>

CSS

@media all{
.storage_devices {data-inset: "true";}
}

@media (max-device-width: 520px) and (orientation:portrait) {
    .storage_devices {data-inset: "false";}
}

我假设 JQuery Mobile 库正在标记 html，因此该类没有正确识别 div。我也尝试过使用id，但没有运气。

谢谢

【问题讨论】：

您正在尝试通过 CSS 应用数据属性，除非我遗漏了什么，这是两个完全不同的过程。您可以使用 CSS 覆盖媒体查询中的 jQM 样式，或使用 JS 检测窗口大小并应用正确的数据属性并刷新小部件（或仅添加/删除您想要处理的特定类）。跨度>

标签： javascript jquery jquery-mobile responsive-design

【解决方案1】：

我用过

@media all and (max-width: 650px) {
   .storage_devices {data-inset: "false"}
}

您可以更改宽度，然后根据需要添加方向。

【讨论】：

你能把 DOM 属性指定为 CSS 属性吗？问题中的 CSS 对我来说看起来很有趣，Jasper 在他的评论中说它不应该工作。我自己尝试过，它对我不起作用。我正在尝试做类似的事情。问题中的方法和这个答案看起来都是错误的，但我不知道应该怎么做，或者是否有可能。
查看此 URL 以了解您可以使用媒体查询使用 CSS 更改类。 alistapart.com/article/responsive-web-design
我没有看到任何关于更改类的内容，也没有看到任何关于数据属性的内容。我没有看到文章中有什么建议可以将数据属性用作 CSS 属性。