jQuery Mobile面板不会隐藏

时间:2014-02-16 06:31:49

标签: jquery jquery-mobile jquery-mobile-panel

我正在尝试添加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/

1 个答案:

答案 0 :(得分: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>