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

问题描述 投票:0回答:2

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

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

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:我已经在浏览器中检查过,Panel 的 div 并没有占用比实际看起来更多的宽度。所以这不是问题。

android jquery css jquery-mobile panel
2个回答
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; }
现在工作正常。


0
投票
我在单击响应式面板的右侧部分时遇到关闭问题,我必须使用上面建议的代码覆盖关闭区域,但将其放在 % 中更有用,这样它才能工作在任何浏览器上

left: 80% !important;


    

© www.soinside.com 2019 - 2024. All rights reserved.