jQuery Mobile panel not animating or closing

问题:

SOLUTION

I was being an idiot and dynamically adding data-role="content" to the #wrapper element on page load, making it unrecognizable by JQM.

I'm trying to implement a basic menu panel, but I'm having no luck getting it to animate or close.

Below is the basic markup as generated by JQM.

<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-body-c ui-page-panel ui-page-active">
    <div id="menu-panel" data-role="panel" data-position="left" data-display="reveal" data-dismissible="true" class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-panel-closed ui-body-c ui-panel-animate">
        <div class="ui-panel-inner">
            <ul>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
            </ul>
        </div>
    </div>
    <div id="wrapper" data-role="content">
        <a href="#menu-panel" id="btn-menu" data-role="button" data-position="left" data-reveal="reveal" data-dismissible="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all"><span class="ui-btn-inner"><span class="ui-btn-text"></span></span></a>
        <!-- Page content -->
    </div>
</div>

CSS for #wrapper:

#wrapper {
    margin: 0 auto;
    min-height: 100%;
    padding: 0;
    position: relative;
    width: 100%;
}

It seems wrong to put redundant data roles in the panel and the button, but all the examples I've looked at, including the official docs, have it that way.

The panel appears, but doesn't make use of the CSS transforms. It also doesn't push the page content over or close on any event.