单击靠近面板时，jQuery Mobile Panel未关闭

Question

我的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小提琴。但它并没有让我知道我需要在样式表中做出哪些更改。

我也尝试将@media (min-width:55em)更改为@media (min-width:35em)，这也没有任何帮助。

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

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

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

现在工作正常。

Answer 2

我的响应面板在其右侧部分被关闭时遇到问题，我不得不使用上面建议的代码覆盖解散区域，除非将它放在％中更有用，所以它将适用于任何浏览器

left: 80% !important;