0

解决方案

我是个白痴，在页面加载时动态添加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>

#wrapper 的 CSS：

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

在面板和按钮中放置冗余数据角色似乎是错误的，但我看过的所有示例，包括官方文档，都是这样的。

面板出现，但不使用 CSS 转换。它也不会在任何事件上推送或关闭页面内容。

4

0 回答 0