Question

以下代码在之前的jquery移动版本中运行良好。更新后，在切换页面两次以上后面板无法打开。我有两个页面，两个页面都有相同的面板。没有使用任何Javascript的面板。请帮助。

<!DOCTYPE html>
    <html>
    <head>
      <!-- Include meta tag to ensure proper rendering and touch zooming -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Include jQuery Mobile stylesheets -->
      <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
      <!-- Include the jQuery library -->
      <script src="jquery-mobile/jquery-1.11.3.min.js"></script>
      <!-- Include the jQuery Mobile library -->
      <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div data-role="page" id="page1">
        <div data-role="panel" id="myPanel"> 
        <ul>
        <li><a href="#page1">Page 1</a>
        <li><a href="#page2">Page 2</a>

        </div> 

      <div data-role="header">
      <h1>Welcome To My Homepage</h1>
      <a href="#myPanel" >!</a>
      </div>

      <div data-role="main" class="ui-content">
      <p>Welcome! Page 1</p>
      </div>

      <div data-role="footer">
      <h1>Footer Text</h1>
      </div>
    </div> 


    <div data-role="page" id="page2">
        <div data-role="panel" id="myPanel"> 
        <ul>
        <li><a href="#page1">Page 1</a>
        <li><a href="#page2">Page 2</a>

        </div> 

      <div data-role="header">
      <a href="#myPanel" >!</a>
      <h1>Welcome To My Homepage</h1>
      </div>

      <div data-role="main" class="ui-content">
      <p>Welcome! Page 2</p>
      </div>

      <div data-role="footer">
      <h1>Footer Text</h1>
      </div>
    </div> 

    </body>
    </html>

Answer 1

它看起来好像是因为你有重复的面板而造成的。不知道为什么它之前有效但不是在更新jquery移动库之后，但是更新可以解决这个明显的问题。

You'll find documentation here in regards to external panels

它表示您可以将面板放在页面之外，但您必须手动初始化它，如下所示：

    $(function () {
        $("[data-role='panel']").panel();
    });

这里的工作示例： https://jsfiddle.net/partypete25/4jmewbo5/

另外，您的＆lt; ul＆gt;面板列表缺少结束标记＆lt; / ul＆gt;

更新后Jquery Mobile Panel无法正常工作

1 个答案: