JQuery 移动面板样式 : data-display ="reveal" not working properly

Question

我正在开发一个 jQuery 移动应用程序，到目前为止我在面板样式方面遇到了麻烦:

http://jsfiddle.net/xt3MM/1/

我有一个导航列表，它从左边出现。我将数据显示设置为默认值 (data-display="reveal")，但列表似乎悬停在正文上方。这样 body 的阴影就不会应用到这个左侧菜单的列表中:

http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page

<!-- RIGHT -->
<div data-role="panel" id="right-panel" data-display="reveal" data-position="right">
    <ul data-role="listview" data-icon="false" data-theme="c">
        <li><a href="#" data-icon="home">Home Right</a></li>
        <li><a href="#" data-icon="star">Buttons Right</a></li>
        <li><a href="#">Facebook Right</a></li>
        <li><a href="#">Mail Right</a></li>
        <li data-icon="delete"><a href="#" data-rel="close">Close Right</a></li>
    </ul>
</div><!-- /panel -->


<div class="header" data-role="header" data-position="inline" data-theme="c">

    <h1>Lorem Ipsum</h1>

    <a href="#right-panel" data-icon="grid" class="header-menu"></a>

</div>

我尝试将 z-index 设置得较低，但随后菜单完全消失了。

这是阴影的屏幕截图，它不在菜单上。

http://i.imgur.com/Md5jmJJ.jpg

亲切的问候，

乔治:)

Answer 1

您提供的演示页面指定了 data-display 的另一个值:data-display="overlay"

在这里查看一个 jsFiddle:http://jsfiddle.net/xt3MM/2/