我在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;
}
}
我已经尝试过这个答案,但是并没有帮助我。我也检查了这个小提琴。但这并没有让我知道我需要在样式表中进行哪些更改。
我还尝试将更@media (min-width:55em)
改为@media (min-width:35em)
,也没有帮助。
如果有人可以帮助样式表部分,那就太好了。
PS:我已经在浏览器中检查了Panel的div宽度没有超出实际外观。所以这不是问题。
我发现了问题。
此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;
}
现在工作正常。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句