Jquery mobile jQuery移动响应面板关闭问题_Jquery Mobile_Panel

Jquery mobile jQuery移动响应面板关闭问题

jquery-mobile

Jquery mobile jQuery移动响应面板关闭问题,jquery-mobile,panel,Jquery Mobile,Panel,在jQuery Mobile 1.3.0中，可以使用响应面板。除了“在宽屏幕上禁用关闭”功能外，它几乎功能齐全 Index.html <body> <div id="indexPage" data-role="page" data-theme="a" class="ui-responsive-panel">  <div data-role="pan

在jQuery Mobile 1.3.0中，可以使用响应面板。除了“在宽屏幕上禁用关闭”功能外，它几乎功能齐全

Index.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" />
                    &nbsp;</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>

因此，同样，当使用上面的CSS时，可以在更宽的屏幕上调整内容（例如，我的平板电脑，这样可以正常工作），但点击时关闭（data dismissible=“true”）不会被禁用（通过display:none；）。这导致在面板打开时，如果面板未关闭，我无法“使用”内容

我搜索了互联网并检查了jQuery的Github，但没有找到任何已知的bug或解决方案

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;
}

我最终成功地让它工作了

关键是CSS类“ui面板解除显示-推送”，仅当面板上的数据显示属性为“推送”时才适用

在您的情况下，更新CSS文件，使其具有一个类“ui响应面板ui面板解除显示-显示”，并带有“显示：无”；并且它应该可以工作。

您能提供一些详细信息吗？它似乎不起作用：（.更新了我的问题。它似乎只是被忽略了（显示无）。在Android 4.0.4和Android 4.2.2上尝试了它。我添加了.ui面板{display:none！important；}并且它对我有效，谢谢！

    /* disable "dismiss" on wide viewports */
.ui-responsive-panel.ui-panel-dismiss-display-reveal {
    display: none;
}