jQuery Mobile Panel在靠近面板点击时未关闭

我在jQuery Mobile应用程序中遇到了一个小问题。一切工作正常，除了的功能解除面板外点击。jQuery Mobile Panel在靠近面板点击时未关闭

见下这也解释了我的问题的屏幕截图。

enter image description here

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

这是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：我在面板的DIV没有采取更多的宽度比实际看起来的浏览器已经检查。所以这不是问题。

来源

2013-10-30 MysticMagicϡ

所用的设备/浏览器，你得到这个问题的工作吗？我无法在Chrome上重现它。 – Omar

我得到了铬中的错误。三星Galaxy Tab 2，华为登陆y 300以及所有其他客户端测试的设备。你确定我没有在样式表中犯任何小错误吗？ @Omar –

我仍然在试图弄明白。我使用了镀铬桌面和窄屏幕。如果您可以发布您的完整代码，至少可以在页面和面板上使用CSS。另外，请确保您没有在其他地方覆盖.ui-page。 – Omar

我发现了这个问题。

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

现在它的工作正常。

来源

2013-10-30 15:43:31

当我的响应面板在右侧单击时发生问题时，我不得不使用上面建议的代码覆盖解雇区域，除非它在％中更有用，所以它可以在任何浏览器

left: 80% !important;

来源

2014-05-16 17:17:18 user3616770

jQuery Mobile Panel在靠近面板点击时未关闭

回答

相关问题