jQuery 移动面板问题答案

【问题标题】：jQuery Mobile Panel ProblemsjQuery 移动面板问题
【发布时间】：2014-03-10 14:30:11
【问题描述】：

我有一个行为不正常的 jQuery Mobile 面板（如果有问题，在 PhoneGap 中）。

<div data-role="panel" id="nav-popup-menu" data-position="left" data-transition="slide" data-display="overlay" data-dismissible="true">
  <button class="search">Search</button>
</div>

.ui-panel {
  background-color: rgba(0,0,0,0.5) !important;
  width: 200px;
}

<a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>

根据上述情况，我预计按面板外的任何位置都会导致它关闭。但是，这种行为似乎不尊重我的自定义宽度。也就是说，如果我按 250 像素，它不会关闭，而如果我按 500 像素，默认宽度已经结束，它会关闭。

使用 JQM 1.4.1

有什么想法吗？

【问题讨论】：

标签： jquery jquery-mobile mobile cordova

【解决方案1】：

一个面板添加了一个类ui-panel-dismiss的覆盖，一旦点击/触摸它就会关闭活动的面板。面板覆盖的默认位置是left: 17em;（在左侧面板的情况下）。该值也代表面板的默认宽度。

当您覆盖面板的宽度时，您还需要调整叠加层的位置。只需给它与 panel 的新宽度相同的值即可。

.ui-panel-dismiss {
  left: 200px !important;
}

Demo

【讨论】：