Панель jQuery Mobile не анимируется и не закрывается

Question

РЕШЕНИЕ

Я был идиотом и динамически добавлял data-role="content" к #wrapper элемент на странице загрузки, что делает его неузнаваемым JQM.

Я пытаюсь реализовать базовую панель меню, но мне не везет, чтобы ее оживить или закрыть.

Ниже приведена базовая разметка, сгенерированная 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 для #wrapper:

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

Кажется неправильным помещать избыточные роли данных в панели и кнопке, но все примеры, на которые я смотрел, включая официальные документы, так и есть.

Панель появляется, но не использует CSS-преобразования. Это также не толкает содержимое страницы ни при каких обстоятельствах.