jQuery Mobile Panel不会在单击时关闭

我有一个PhoneGap应用程序，它使用jQuery Mobile多页布局。在每一页（A页和B页）上，我都有一个用于在页面之间切换的导航栏。不涉及自定义代码。我在每一页上都有一个面板，点击标题中的"新建"按钮即可打开。

有时我会按下按钮（可能是软按钮或快速按钮）打开面板，但按钮只是将其状态更改为"活动"，面板不会打开。我再也不能点击按钮了。当我更改页面并返回（全部使用导航栏）时，页面A再次出现，现在面板打开。这是一种奇怪的行为，但可能是合理的。但现在想要关闭它是不可能的。单击面板中的某个按钮与单击页面本身一样处于非活动状态。整个事情似乎都冻结了。

    <div data-role="page" id="one">
        <div data-role="header" data-transition="fixed">
            <a href="#panel_one" data-role="button" data-icon="grid">New</a>
            <h1 class="header">myApp</h1>
            <a href="#popup_one" data-role="button" data-rel="popup" data-icon="gear" data-iconpos="notext" data-corners="false" class="ui-btn-right" data-transition="slidedown" onclick="menu();">Options</a>
        </div>
        <!-- Header -->
        <div data-role="panel" id="panel_one">
            <div data-role="collapsible-set" class="menu"></div>
        </div>
        <!-- Panel -->
        <div data-role="content">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
                    <li><a href="#two" data-transition="none" >B</a></li>
                </ul>
            </div>
        </div>
        <!-- Content -->
    </div>
    <!-- Page One-->
    <div data-role="page" id="two">
        <div data-role="header" data-transition="fixed">
            <a href="#panel_two" data-role="button" data-icon="grid">New</a>
            <h1 class="header">myApp</h1>
            <a href="#popup_two" data-role="button" data-rel="popup" data-icon="gear" data-iconpos="notext" data-corners="false" data-transition="slidedown" class="ui-btn-right"  onclick="menu();">Options</a>
        </div>
        <!-- Header -->
        <div data-role="panel" id="panel_two">
            <div data-role="collapsible-set" class="menu"></div>
        </div>
        <!-- Panel -->
        <div data-role="content">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-transition="none">A</a></li>
                    <li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
                </ul>
            </div>
        </div>
        <!-- Content -->
    </div>
    <!-- Page Two-->

menu()创建菜单的内容，该内容在示例中未显示。另一个方法（loadPanel()）被绑定到pageshow事件，并将用按钮填充边栏。每个按钮都将执行

var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');

在执行任何其他操作之前。然而，所有这些在大多数情况下都有效，我只想知道是否有人观察到类似的行为。