jQuery 移动面板和媒体查询

Question

我的 jQuery 移动页面上有这样一个面板：

这里的媒体查询：

当用户在桌面上访问页面时，我使用它来减小页面的大小。无论如何，当我使用媒体查询并单击面板内的 "buttons" 时，面板会关闭，就像我在面板外按下一样...... 如何正确使用媒体查询和 jquery 移动面板？

相关代码：

<div data-role='panel' id='panel' data-display='overlay'>
    <ul data-role='listview'>
        <li>
            <a href='https://printsrv2.rz.hs-offenburg.de/index.php' data-rel='external' data-role='button' data-icon='arrow-r' data-inline='true' data-ajax='false' target='_blank'>Druckaufträge</a>
        </li>
        <li>
            <a href='#uploadPage' data-rel='close' data-role='button' data-icon='delete' data-inline='true'>Schließen</a>
        </li>
    </ul>  
</div>

我按要求做了一个jsfiddle，你需要将结果视图展开到最大（你的屏幕必须够大）才能看到问题

Answer 1

一个快速的解决方案是使用 z-index 使面板关闭层出现在面板下方。默认情况下，面板的 z-index 为 1001，dismiss div 为 1002。在您的媒体查询中，您可以将 dismiss div z-index 设置为 999:

@media only screen and (min-width: 30em) {
        .ui-page {
                width: 30em !important;
                margin: 0 auto !important;
                position: relative !important;
                border: 1px solid lightgrey !important;
                border-radius: 15px;
                padding: 10px;
        }

        .ui-panel-dismiss {
                z-index: 999;    
        }
}

Updated FIDDLE

注意：如果你想更彻底，你可以在打开的面板上调整和定位关闭 div。

jQuery 移动面板和媒体查询

jQuery Mobile Panel & Media Queries

css

html

jquery-mobile

media-queries

panel