使可折叠集的功能在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屋!