jquery - 当我在单击关闭按钮后更改 jquerymobile 面板宽度时，它会以非预期效果关闭面板

Question

我想为我的移动界面更改.ui-panel的宽度，所以我在我的媒体查询中进行了这样的更改（在 css 中）

.ui-panel{width: 310px !important}

但是现在当我关闭它时。当它到达 17em 的终点时，它会显示一个障碍

我从这里尝试了这个解决方案：jQuery Mobile panel width

有什么建议么 ？

Answer 1

当更改overlay或push面板的宽度时，您还必须更新translate3d动画属性以匹配宽度。默认面板的宽度是17em，默认动画x位置是-17em。

/* left panel - overlay and push */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
  left: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}

/* right panel - overlay and push */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
  right: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}