在JQuery Mobile中使可折叠集的功能响应

Question

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

我有一些可折叠的内容，我希望在桌面浏览器和ipad格局中插入，但不能插入平板电脑肖像和手机上。

我有其他响应元素正常工作，但以下html＆amp; 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而没有运气。

由于

Answer 1

我用过

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

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