jQuery Mobile-面板问题-第二次单击时未打开

Question

I have a working left panel in my App that I have began to build, however when I try and go back to my main screen the panel no longer works. 我的应用程序中有一个正在工作的左侧面板，我已经开始构建该面板，但是当我尝试返回主屏幕时，该面板不再起作用。 To see this bug, use the following method: 要查看此错误，请使用以下方法：

1) Click on 'Bars' Icon top left and go to Google Maps 1）点击左上方的“酒吧”图标，然后转到Google地图

2) Once on the blank page, use the panel to go back to Home page. 2）进入空白页后，使用面板返回首页。

3) Try and open panel once more. 3）尝试再次打开面板。

JSFiddle Link JSFiddle链接

Any ideas? 有任何想法吗？

<!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

Fixed, here is the fiddle: http://jsfiddle.net/tHDWJ/1/ 固定，这里是小提琴： http : //jsfiddle.net/tHDWJ/1/

Problem was that you were referencing the same panel in both pages and when you navigate the current page hides the previous panel. 问题是您在两个页面中都引用了相同的面板，并且在浏览当前页面时隐藏了前一个面板。

Note the difference in the following lines: 请注意以下几行的区别：

<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 个解决方案

解决方案1
4 已采纳 2014-01-15 08:32:46

jQuery Mobile-面板问题-第二次单击时未打开

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-01-15 08:32:46

解决方案1
4 已采纳 2014-01-15 08:32:46