jquery手机外置面板无法正常打开

Question

我正在尝试让 jquery 移动面板正常工作。目前，当面板打开时，它会一直滑动覆盖我的页面，而不是部分滑动。我想这一定与面板的初始化有关。

有什么想法吗？

HTML

<div id="panel_home" data-role="panel"  data-position="right" data-display="slide" data-theme="a">
<ul  data-role="listview">
    <li>Panel Button 1</li>
    <li>Panel Button 2</li>
    <li>Panel Button 3</li>
</ul>
</div>

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

<div data-role="header" data-position="fixed" >
    <a  href="#panel_home" > <img border="0"
           src="http://cdn-img.easyicon.net/png/11464/1146409.gif"
           width="30" height="30">
    </a>
</div>


<div data-role="content" >
    <h2>Page Content</h2>
</div>


<div data-role="footer" data-position="fixed">
    <h2>Footer Content</h2>
</div>
</div>

JS

$(document).one('mobileinit', function () {
   $("[data-role=panel]").panel().enhanceWithin();
});

Answer 1

外部面板应在 Jquery 的 document.ready 上初始化：

$( document ).ready(function() {
    $("[data-role=panel]").panel().enhanceWithin();
});

Updated FIDDLE

jquery手机外置面板无法正常打开

jquery mobile external panel does not open properly

panel

jquery-mobile