在靠近面板的位置单击时,jQuery Mobile Panel未关闭

神秘魔法ϡ

我在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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在靠近面板的位置单击时,jQuery Mobile Panel未关闭

来自分类Dev

关闭jQuery Mobile面板

来自分类Dev

jQuery Mobile Panel打开时隐藏flexslider

来自分类Dev

jQuery mobile-仅在关闭侧面板时才允许滚动吗?

来自分类Dev

jQuery Mobile Panel样式问题

来自分类Dev

jQuery mobile:'pageinit'未触发

来自分类Dev

jQuery Mobile Panel打开操作之前

来自分类Dev

jQuery Mobile Panel无法正常运行

来自分类Dev

jQuery Mobile Panel导航冻结/挂起

来自分类Dev

打开另一个v-expansion-panel时未关闭

来自分类Dev

jQuery Mobile对话框立即关闭

来自分类Dev

我如何禁用jQuery Mobile Popup的关闭

来自分类Dev

jquery-mobile:关闭桌面主题

来自分类Dev

关闭对话框时的jQuery Mobile TypeError

来自分类Dev

单击Google Maps指针即可打开jQuery Mobile面板weidget

来自分类Dev

jQuery Mobile:固定页脚,导航面板未调整大小,内容未居中

来自分类Dev

jQuery Mobile:外部面板的位置/始终可见吗?

来自分类Dev

jQuery Mobile:外部面板的位置/始终可见吗?

来自分类Dev

调用.panel()函数时,jQuery Mobile Panel小部件会引发错误(1.4.5,jquery 1.11.1)

来自分类Dev

jQuery Mobile面板不会隐藏

来自分类Dev

jQuery Mobile面板不会隐藏

来自分类Dev

面板内的JQuery Mobile listview

来自分类Dev

单击时关闭角垫扩展面板

来自分类Dev

jQuery Mobile多个页面在调用面板时导致问题

来自分类Dev

jQuery mobile panel doesn't close fully only on Android browser

来自分类Dev

jQuery mobile Panel的页眉和页脚高度差

来自分类Dev

jQuery Mobile和Ajax Panel无法正确打开

来自分类Dev

更新后,jQuery Mobile Panel无法正常工作

来自分类Dev

停止页眉页脚从松动的位置:单击固定-Jquery Mobile

Related 相关文章

热门标签

归档