Question

我的应用程序中有一个工作左侧面板，我已经开始构建，但是当我尝试返回主屏幕时，面板不再有效。要查看此错误，请使用以下方法：

1）点击左上角的“酒吧”图标，然后转到谷歌地图

2）进入空白页面后，使用面板返回主页。

3）再次尝试打开面板。

有什么想法吗？

<!DOCTYPE HTML>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <!-- <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"> -->
    <!-- <script src="jquery-2.0.3.min.js"></script> -->
    <!-- <script src="jquery.mobile-1.4.0.min.js"></script> -->
</head>

<body>
    <!-- Main Page -->
    <div data-role="page" id="home">
        <!-- Left-Panel -->
        <div data-role="panel" id="left-panel" data-display="overlay">  <a href="#home" class="ui-btn ui-corner-all ui-mini">Home</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">About Us</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">News</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Key Dates</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Calendar</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Contact</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Links</a>
<a href="#two" class="ui-btn ui-corner-all ui-mini">Google Map</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Videos</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Gallery</a>

        </div>
        <!-- Header -->
        <div data-role="header" data-position="fixed" data-theme="a">
            <!-- Header -->
                <h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars"></a>

        </div>
        <!-- Content -->
        <div role="main" class="ui-content">
            <div>
                <img src="" id="picture">
            </div>
        </div>
        <!-- Footer -->
        <div data-role="footer" data-position="fixed" data-theme="a">
                <h4>Footer</h4>

        </div>
    </div>
    <!-- Maps Page -->
    <!-- Start of second page -->
    <div data-role="page" id="two">
        <!-- Left-Panel -->
        <div data-role="panel" id="left-panel" data-display="overlay">  <a href="#home" class="ui-btn ui-corner-all ui-mini">Home</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">About Us</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">News</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Key Dates</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Calendar</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Contact</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Links</a>
<a href="#two" class="ui-btn ui-corner-all ui-mini">Google Map</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Videos</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Gallery</a>

        </div>
        <!-- Header -->
        <div data-role="header" data-position="fixed" data-theme="a">
            <!-- Header -->
                <h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars">
    </div>

<div role="main" class="ui-content">

</div><!-- /content -->

<!-- Footer -->
    <div data-role="footer" data-position="fixed" data-theme="a">
        <h4>Footer</h4>
    </div>

Answer 1

修正了，这是小提琴： http://jsfiddle.net/tHDWJ/1/

问题是您在两个页面中都引用了相同的面板，当您导航当前页面时隐藏了上一个面板。

请注意以下几行中的区别：

<div data-role="panel" id="left-panel1" data-display="overlay">    
<div data-role="panel" id="left-panel2" data-display="overlay">
<a href="#left-panel1" data-iconpos="notext" data-icon="bars"></a>
<a href="#left-panel2" data-iconpos="notext" data-icon="bars"></a>

jQuery Mobile - 面板问题 - 第二次点击时无法打开

1 个答案: