jquery面板的问题？

Question

我是jQuery mobile的新手。我正在尝试为我的应用程序设置一个面板，但面板显示在单击菜单按钮之前。如何在单击菜单按钮时显示面板？

我的代码如下：

<div data-role="page" id="homePage">

    <div data-role="panel" id="navpanel" data-theme="a" data-display="overlay" data-position="right">
        <div data-role="controlgroup" data-corners="false"> <a href="#" data-role="button">Business</a>
            <a href="#" data-role="button">Numbers</a>
            <a href="#" data-role="button">Money</a>
            <a href="#" data-role="button">People</a></div>
    </div>

          <div data-role="header" id="header" data-theme="a">
              <a id="bars-button" data-icon="bars" class="ui-btn-left" style="margin-top:10px;" href="#navpanel">Menu</a>
              <h1>
                  Gps Coordinates
              </h1>
          </div>
</div>

这是我的脚本代码：

</script>
<script type="text/javascript" charset="utf-8">
    var header = $('[data-role=header]').outerHeight();
    var panel = $('.ui-panel').height();
    var panelheight = panel - header;
    $('.ui-panel').css({
                       'top': header,
                       'min-height': panelheight
                       });
</script>

的CSS：

.ui-panel-inner {
            padding:0px;
        }
        .ui-controlgroup {
            margin:0;
        }
        #header {
            height:54px;
        }
        #bars-button {
            margin:7px;
        }

屏幕截图：

商家，数字，金钱和人都是我的菜单列表。

有什么建议吗？