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元素的同級對象。 您可以在這些元素之前或之后添加面板標記，但不能在兩者之間添加。

也許您應該將面板向上移動，因為這可能是造成異常行為的原因