Question

我有一个行为不正常的jQuery Mobile Panel（如果重要的话，在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>

基于以上所述，我希望按下面板外的任何地方会导致它关闭。但是，这种行为似乎不尊重我的自定义宽度。也就是说，如果我按250px，它不会关闭，而如果我按500px，默认宽度已经结束，它会关闭。

使用JQM 1.4.1

有什么想法吗？

Answer 1

面板会添加一个带有ui-panel-dismiss类的叠加层，一旦点击/触摸，它就会关闭活动面板。面板叠加层的默认位置为left: 17em;（如果是左侧面板）。该值也表示面板的默认宽度。

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

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

<强> Demo

jQuery Mobile Panel问题

1 个答案: