css - jQuery Moblile 面板不会推送页面

Question

我正在尝试制作一个默认隐藏的侧面菜单面板。如果点击菜单按钮，页面幻灯片会显示隐藏的菜单。有点脸书式的。我遇到的问题是菜单会出现，但只有标题栏被推过而不是页面的其余部分。

这是 html pastebin：http://pastebin.com/zyEU6mb7和 CSS： http: //pastebin.com/yFHzdMU1

谢谢您的帮助。

Answer 1

页面内容应该放在一个 div 下data-role="content"

演示

<div data-role="content">
 <div data-role="collapsible-set" data-inset="false" id="homepageAccordian">
  <!-- Crew List -->
   <div data-role="collapsible">
    <h3>Crew</h3>
      <ul data-role="listview" data-inset="false">
        <li>Crew #1</li>
        <li>Crew #2</li>
        <li>Crew #3</li>
        <li>Crew #4</li>
       </ul>
      </div>
      <!-- Last Ten -->
      <div data-role="collapsible">
       <h3>Open Calls</h3>
        <ul data-role="listview" data-inset="false">
         <li>Call #1</li>
         <li>Call #2</li>
         <li>Call #3</li>
         <li>Call #4</li>
        </ul>
       </div>
    </div>
</div>