Question

我需要构建一个功能，使用jQuery Mobile在3个级别中的300个可用类别中选择一个类别。

代码以某种方式工作，但第一个加载显示布局问题，其中listview未正确定位。以下是jsfiddle中的示例：https://jsfiddle.net/x_merlin_x/esb6j7wa/5/单击第一个菜单项后，子菜单将加载到正确的位置。一旦你点击左上方的菜单图标并且在重新加载之前没有再次出现，下面的菜单会在chrome（不是jsfiddle）中消失。

代码：

<!DOCTYPE html>
<html lang="DE">
<head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">       
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
     <style>
      #navpanel{
        background-color: #4f4f4f;
        width:200px;
      }
      #navpanel ul{
        width: 200px;
          padding: 0;
          list-style: none;
          list-style-image: none;
          color: white;
          text-shadow: 0 0px 0;
      }
      #navpanel li{
        margin:10px;
        padding:10px;
          border-bottom: 1px solid dimgray;
          text-shadow: 0 0px 0;
      }
      #navpanel li a:link,
      #navpanel li a:visited{
          text-decoration: none;
          color: white;
          font-weight: normal;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script>
     $(function(){
          $( "[data-role='header'], [data-role='footer']" ).toolbar();
      });

      $(function() {
        $( "body>[data-role=\'panel\']" ).panel();
      });
    </script>
  </head>
  <body>
    <div data-role="header" data-tap-toggle="false" data-fullscreen="true" data-position="fixed" class="fixedHeader">
        <a class="" style="margin-top:2px;" href="#navpanel">&#9776;</a>
    </div>
    <div data-role="page" id="select_maincat">  
        <div data-role="content"> 
          <h1>Wählen Sie eine Kategorie aus</h1>
            <ul data-role="listview">
               <li><a href="#dienstleistungen">Dienstleistungen</a></li>
            </ul>     
        </div>
    </div>
    <div data-role="page" id="dienstleistungen">  
        <div data-role="content"> 
          <h1>Wählen Sie eine Kategorie aus</h1>
            <ul data-role="listview">    
              <li><a href="#betreuung-pflege">Betreuung & Pflege</a></li>
            </ul>     
        </div>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      footer
      <div data-role="navbar" style="border-bottom: 1px solid #1F1F1F;">
        <ul>
            <li><a href="" data-icon="home" data-theme="b" data-ajax="false">home</a></li>
        </ul>
      </div>
    <!-- /navbar -->
  </div> 
  <!-- footer -->
  <div data-role="panel" id="navpanel" data-display="overlay" data-position="right">
      <ul>
          <li><a href="/" data-ajax="false">test</a></li>
      </ul>
  </div>
  </body>
</html>

不幸的是，没有任何错误消息或任何可以帮助我解决此问题的指示。

为什么JQM会在固定的工具栏多页设置中丢失视口？

0 个答案: