Question

我正在使用jQuery Mobile 1.4.2 根据规范，我按照http://demos.jquerymobile.com/1.4.2/panel-external/

使用外部幻灯片

正在发生的事情是当菜单关闭时，它的一部分滞后，因此它不会顺利关闭。

很难解释所以我在这里有一个例子：

打开左侧菜单面板，然后单击lorem ipsum文本以关闭面板。

根据文档简单实现开放式关闭行为：

( function($) {

$(document).on("pageinit", function() {
            $("body>[data-role='panel']").panel().enhanceWithin(); 
});

} ) ( jQuery );

简化DOM：

    <header data-role="header" id="header" data-id="header" class="header ui-page-theme- ui-header ui-bar-a" role="banner">
        <div data-role="navbar" class="ui-navbar" role="navigation">
            <ul class="ui-grid-b">
                <li class="ui-block-a">
                    <a href="#main_menu" data-transition="reveal" class="f-menu menu_control ui-link ui-btn"><span>Open left panel</span></a>
                </li>
                <li class="ui-block-b"><a href="#">logo</a></li>
                <li class="ui-block-c"><a href="#">something else</a></li>
            </ul>
        </div>
    </header>
    <section data-role="page" id="product_details" data-title="category page" data-url="product_details" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 1045px;">
        <div class="ui-panel-wrapper ui-panel-animate ui-panel-page-content-position-left ui-panel-page-content-display-reveal ui-panel-page-content-open">
            <div role="main" class="ui-content single_product">
                Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
            </div>
        </div>
    </section><!--/mneu=-->
    <div data-display="reveal" data-position="left" data-role="panel" data-theme="a" id="main_menu" data-id="main_menu" class="main_menu ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-a ui-panel-animate ui-panel-open">
        <ul data-role="listview" class="ui-listview">
           <li>blah</li>
           <li>blah</li>
           <li>blah</li>
        </ul><!-- submenu -->
        <!--/.catnav-->
    </div>

嗯，有人能发现我的问题吗？

感谢。

Answer 1

<header data-role="header" id="header" data-id="header" class="header" data-theme="a" data-position="fixed">

我比较了你的工作版Omar和标题声明是不正确的。感谢。

jQuery移动外部面板落后了

1 个答案: