jQuery Mobile 面板不会隐藏答案

【问题标题】：jQuery Mobile panel won't hidejQuery Mobile 面板不会隐藏
【发布时间】：2014-02-16 06:31:48
【问题描述】：

我正在尝试添加一个 jQuery 移动滑动面板。我可以弹出由锚链接触发的滑块，但它不会再次隐藏。我需要添加一个额外的jquery脚本吗？

<div data-role="page">

<div data-role="panel" id="mypanel">
    <h1>This panel won't disappear</h1>
</div><!-- /panel -->
<body>
    <div class="wrapper">
    <div id="temp-speech"><a href="#mypanel"><img src="images/speech_bub.png" /></a></div>
</div>

</div><!-- page -->
</body>

我创建了一个更新的小提琴http://jsfiddle.net/AZLWd/

【问题讨论】：

页面 div 应该在 body 标签内。您的 html 语法不正确。将data-rel="panel" 添加到打开面板的锚点。
@Omar 谢谢，但它仍然没有关闭。我把锚改成了<a href="#mypanel" data-rel="panel">，对吗？
页面 div 是否在 body 标签内？
是的，它在体内。
面板是直接放在页面div下面吗？你在面板上使用data-dismissible="false" 吗？请添加更多详细信息。

标签： jquery jquery-mobile jquery-mobile-panel

【解决方案1】：

打开面板时，检查.ui-header（内部）、.ui-content 和.ui-footer（内部）以将它们包装在.ui-panel-wrappr div 中。该 div (.ui-panel-wrapper) 接收 open 和 close 动画类。如果 panel 未能找到上述任何 div，则不会添加 close 动画类并且 panel 保持打开状态。

Panel widget:

_getWrapper: function () {
     var wrapper = this._page().find("." + this.options.classes.pageWrapper);
     if (wrapper.length === 0) {
         wrapper = this._page().children(".ui-header:not(.ui-header-fixed), .ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)")
             .wrapAll("<div class='" + this.options.classes.pageWrapper + "'></div>")
             .parent();
     }
     return wrapper;
 },

鉴于上述情况，任何页面都应至少包含页眉、页脚或内容 div 才能正常运行。

<div data-role="page">
  <div data-role="panel">
    <!-- panel content -->
  </div>
  <div role="main" class="ui-content">
    <!-- contents -->
  </div>
</div>

【讨论】：