关闭 jQuery Mobile 面板答案

【问题标题】：Closing jQuery Mobile Panel关闭 jQuery Mobile 面板
【发布时间】：2013-12-09 18:38:58
【问题描述】：

我有一个带有类似链接的面板

第1页
第2页
第3页

如果我当前在 Page1 上并打开面板，当我再次选择 Page1 时面板不会关闭。我检查了jQuery mobile panel documentation，并且具有相同的行为（如果您打开面板并单击“面板”，面板将保持打开状态。

如果选择了相同的页面链接，有没有办法关闭面板？

编辑：jQuery Mobile 版本：1.3.2 jQuery 版本：1.9.1

【问题讨论】：

你能提供一个关于jsfiddle的demo吗？
以编程方式关闭它，$(".selector").panel("close");
这是一个演示 jsfiddle.net/k89A5

标签： javascript jquery jquery-mobile

【解决方案1】：

你做这样的事情

$(document).on("pageinit", function () {
  $("[data-role=panel] a").on("click", function () {
    if($(this).attr("href") == "#"+$.mobile.activePage[0].id) {
      $("[data-role=panel]").panel("close");
    }
  });
});

更新：对于 jQM >= 1.4 使用 $.mobile.pageContainer.pagecontainer("getActivePage") 而不是 $.mobile.activePage。

演示：http://jsfiddle.net/Palestinian/k89A5/1/

【讨论】：

你可以只使用 $("[data-role=panel]").panel("close");在返回函数中关闭面板

【解决方案2】：

只添加 data-rel="close"

 <li class="liPanel"><a href="javascript:void(0);" **data-rel="close"** class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-info">Faqs</a>
</li>

【讨论】：