css - jQuery Mobile 面板不会将页面推过去

Question

我正在尝试制作一个默认隐藏的侧面菜单面板。如果点击菜单按钮，页面会滑动以显示隐藏的菜单。有点像facebook。我遇到的问题是，菜单会出现，但只有标题栏被推到页面的其余部分。

这是 html 粘贴箱:http://pastebin.com/zyEU6mb7和CSS:http://pastebin.com/yFHzdMU1

感谢您的帮助。

Answer 1

页面内容应位于 data-role="content"

的 div 下

Demo

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