jQuery Mobile Panel不能在单击时关闭

Question

我有一个使用jQuery Mobile多页布局的PhoneGap应用程序。 在每个页面上（页面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-event，并将用按钮填充侧栏。 每个按钮都会执行

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

在执行其他任何操作之前。 但是，所有这些操作大部分时间都是有效的，我只想知道是否有人观察到了类似的行为。

Answer 1

根据jQuery mobile文档

面板必须是jQuery Mobile页面内的header，content和footer元素的同级对象。 您可以在这些元素之前或之后添加面板标记，但不能在两者之间添加。

也许您应该将面板向上移动，因为这可能是造成异常行为的原因