在面板附近单击时，jQuery Mobile 面板未关闭答案

【问题标题】：jQuery Mobile Panel not closed when clicked nearer the panel在面板附近单击时，jQuery Mobile 面板未关闭
【发布时间】：2013-11-09 15:18:19
【问题描述】：

我的 jQuery Mobile 应用程序中的面板有点问题。除了点击外部关闭面板的功能外，一切正常。

请参阅下面解释我的问题的屏幕截图。

注意我画的红线。如果我在面板打开时单击该行的右侧，它可以正常工作。但是，如果我单击该行的左侧，则面板不会被关闭。

这里是html部分。

<div data-role="panel" id="sidebar-menu-monthly" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a" >
    <ul>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
</div>

我也尝试设置data-display="push"。那也没用。

这是样式表部分：

/* wrap on wide viewports once open */
@media (min-width:55em){
    .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;    
    }
    .ui-responsive-panel .ui-panel-dismiss-display-push {
        display: none;
    }
}

我已经尝试过this 的回答，但对我没有帮助。我还检查了this fiddle。但这并没有让我知道我需要在样式表中进行哪些更改。

我还尝试将@media (min-width:55em) 更改为@media (min-width:35em)，但也没有用。

如果有人可以帮助处理样式表部分，那就太好了。

P.S：我已经在浏览器中检查了 Panel 的 div 没有占用比实际看起来更多的宽度。所以这不是问题。

【问题讨论】：

您在哪个设备/浏览器上遇到此问题？我无法在 chrome 上重现它。
我在 chrome 中遇到错误。以及三星galaxy tab 2、华为avenue y 300和客户测试过的所有其他设备。你确定我没有在样式表中犯任何小错误吗？ @奥马尔
我仍在努力解决。我使用的是 chrome 桌面和窄屏。如果您可以发布完整的代码，至少是页面和面板以及 CSS。另外，请确保您没有在其他地方覆盖 .ui-page。
好的..如果你弄明白了请告诉我。我自己也在尝试，但到目前为止没有取得任何成功:(@Omar
请用jsfiddle链接发布一些代码

标签： android jquery css jquery-mobile panel

【解决方案1】：

我发现了问题。

这个 css（来自默认的 jqm css - jquery.mobile-1.3.2.min.css）正在创建问题

.ui-panel-dismiss-open
{
    left: 17em;
}

所以它只在最右边的区域被解雇了。我必须覆盖我的 css 文件中的 css 以：

.ui-panel-dismiss-open
{
    left: 13em !important;
}

现在它工作正常了。

【讨论】：

【解决方案2】：

我的响应式面板在单击其右侧部分时被关闭时遇到问题，我必须使用上面建议的代码覆盖关闭区域，但将其放在 % 中更有用，以便它适用于任何浏览器

left: 80% !important;

【讨论】：