使可折叠集的功能在JQuery Mobile中响应 [英] Making features of collapsible sets responsive in JQuery Mobile

问题描述

我正在设计可在台式机，平板电脑和手机上使用的应用程序.

I am designing an app that works on the desktop, tablets and phones.

我想在台式机浏览器和ipad横向视图中插入一些可折叠的内容，但不想在平板电脑肖像和手机上插入.

I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.

我还有其他响应元素可以正常工作，但是以下html& CSS不起作用:

I have other responsive elements working correctly, but the following html & CSS are not working:

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.我也尝试过身份证，但没有运气.

I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.

谢谢

推荐答案

我用过

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

您可以更改宽度，然后添加方向以适合您的需求.

You can change the width, then add the orientation to fit your needs.

这篇关于使可折叠集的功能在JQuery Mobile中响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！