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

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

jquery html css jquery-mobile layout

Jquery 为什么JQM会在固定工具栏多页设置中丢失视口？,jquery,html,css,jquery-mobile,layout,Jquery,Html,Css,Jquery Mobile,Layout,我需要构建一个功能，使用jQuery Mobile从3个级别的300个可用类别中选择一个类别代码以某种方式工作，但是第一次加载显示了一个布局问题，其中listview列表的位置不正确。以下是JSFIDLE中的示例：单击第一个菜单项后，子菜单将加载到正确的位置。此外，在chrome中（而不是在JSFIDLE中），单击左侧顶部菜单图标后，下部菜单将消失，并且在重新加载之前不会再次显示代码： #导航面板{ 背景色：#4F4F；宽度：200px； } #导航面板{ 宽度：200px；填充：0；

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

代码以某种方式工作，但是第一次加载显示了一个布局问题，其中listview列表的位置不正确。以下是JSFIDLE中的示例：单击第一个菜单项后，子菜单将加载到正确的位置。此外，在chrome中（而不是在JSFIDLE中），单击左侧顶部菜单图标后，下部菜单将消失，并且在重新加载之前不会再次显示

代码：


#导航面板{
背景色：#4F4F；
宽度：200px；
}
#导航面板{
宽度：200px；
填充：0；
列表样式：无；
列表样式图像：无；
颜色：白色；
文本阴影：0 0px 0；
}
#李国宝{
利润率：10px；
填充：10px；
边框底部：1px实心灰色；
文本阴影：0 0px 0；
}
#导航a：链接，
#李娜：参观了{
文字装饰：无；
颜色：白色；
字体大小：正常；
}
$（函数（）{
$（“[data role='header']，[data role='footer']”）工具栏（）；
});
$（函数（）{
$（“body>[data role=\'panel\']”）.panel（）；
});
你在澳大利亚吗



你在澳大利亚吗



页脚

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

remove

data fullscreen=“true”

这有趣地解决了类别布局的问题，但下面的菜单仍然不显示。一定是出了什么问题，因为一旦我点击菜单图标，谷歌chrome开发者工具内的布局就会变为440px x 870px，模拟iPhone 6。因此，这会将菜单移出视口。

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