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移动文档

面板必须是jQuery Mobile页面内的标题，内容和页脚元素的兄弟。您可以在这些元素之前或之后添加面板标记，但不能在两者之间添加。

也许你应该提升你的面板，因为它可能是造成这种奇怪行为的原因

jQuery Mobile Panel不会在点击时关闭

1 个答案: