【发布时间】：2013-02-16 13:23:44
【问题描述】：
在 jQuery Mobile 1.3.0 中可以使用响应式面板。除了“在宽屏上禁用关闭”功能外，它几乎功能齐全。
索引.html
<body>
<div id="indexPage" data-role="page" data-theme="a" class="ui-responsive-panel">
<!-- left panel -->
<div data-role="panel" id="panelMenuIndex" data-theme="b" data-position="left" data-display="reveal" data-dismissible="true" data-position-fixed="true" data-swipe-close="false">
<ul id="panelListIndex" data-theme="b" data-role="listview"></ul>
</div><!-- /panel -->
<!-- right panel -->
<div data-role="panel" id="panelRightMenuIndex" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="false">
<ul id="panelRightListIndex" data-theme="b" data-role="listview"></ul>
</div><!-- /panel -->
<div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="a">
<div>
<p class="headerBarText"><img id="headerTitleIndex" onclick="togglePanel('#panelMenu' + window.divIdGlobal);" class="headerIconTitle" src="images/icons/ic_launcher_full_arrow.png" /><img id="headerShareIndex" onclick="share(window.shareTagSubject,window.shareTagText);" class="headerIconShare" src="images/icons/ic_action_share.png" /><img id="headerOverflowIndex" onclick="togglePanel('#panelRightMenu' + window.divIdGlobal);" class="headerIconOverflow" src="images/icons/ic_action_overflow.png" />
</p>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h1>My favorite wallpapers</h1>
<div id="wpFavoriteImage"></div>
</div><!-- /content -->
</div><!-- /page -->
</body>
样式表部分：
@media (min-width:35em){
/* wrap on wide viewports once open */
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
}
}
同样，当使用上面的 CSS 时，看到内容正在更宽的屏幕上进行调整（例如，我的平板电脑，这样就可以了），但点击关闭 (data-dismissible="true") 并没有禁用 (按显示：无；）。这导致当面板打开时，如果面板没有关闭，我就无法“使用”内容。
我在网上搜索并查看了 jQuery 的 Github，但没有发现任何已知的错误或解决方案。
jQuery (Mobile) 框架和 css 文件加载到我的 html 文件的标题中。面板中的内容是动态添加的，后跟： $('#panelMenuIndex').trigger("updatelayout");和 $('#panelRightMenuIndex').trigger("updatelayout");。内容和面板显示得很好。
谁能给我指个方向？
也试过了：
/* disable "dismiss" on wide viewports */
.ui-responsive-panel.ui-panel-dismiss-display-reveal {
display: none;
}
【问题讨论】：
标签： jquery-mobile panel