Question

我正在努力让两个jQuery移动面板独立工作。本质上，页面有一个主（导航）面板和一个内容容器。内容容器还在容器内具有面板。

HTML

<div data-role="page" class="ui-responsive-panel">
    <div data-role="header" data-position="fixed"> <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> 
         <h1>Home</h1>

    </div>
    <div data-role="panel" id="menu-panel" data-display="push">
        <ul data-role="listview">
            <li><a href="index.html">Home</a>

            </li>
            <li><a href="About.html">About</a>

            </li>
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="main" class="ui-content">
        <div data-role="panel" id="sub-panel" data-display="push">
            <p>Sub Panel</p>
        </div>
        <div data-role="main" class="ui-content"> <a href="#sub-panel">Toggle sub-panel</a>

            <p>Some content</p>
        </div>
    </div>
</div>

我一直在考虑布局结构和jQuery hacks数小时试图达到有效的解决方案无济于事。在浏览了jQuery移动代码之后，我发现了一个很可能是罪魁祸首的事件监听器：

// line 13258 jquery.mobile.js
...
this.document.on( "panelbeforeopen", function( e ) {
    if ( self._open && e.target !== self.element[ 0 ] ) {
        self.close();
    }
})
...

我认为简单地取消绑定侦听器（$(document).unbind('panelbeforeopen');）会起作用，但它会产生一个意想不到的结果。它会颠倒面板的性质，因此只需点击几下，您就需要open()到close()，反之亦然。

我也尝试在面板上停止事件传播，但这也不起作用。

我创建了一个 FIDDLE 来帮助调试。

非常感谢任何帮助！

Answer 1

通过@Omar提示创建解决方法。相反，此fork会在内容中创建一个嵌套，而不是在面板中。以下为未来开发者提供。

HTML

<div data-role="page" class="ui-responsive-panel">
    <div data-role="header" data-position="fixed"> <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> 
         <h1>Home</h1>

    </div>
    <div data-role="panel" id="menu-panel" data-display="push">
        <ul data-role="listview">
            <li><a href="index.html">Home</a>

            </li>
            <li><a href="About.html">About</a>

            </li>
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="main" class="ui-content">
        <div class='ui-sub-panel' id='submenu1'>
            <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a>

                 <h1 class='ui-title'>Submenu1</h1>

            </div>
            <div class="ui-content">
                <!-- submenu contents here -->
                Sub content
            </div>
        </div>
        <div class="ui-sub-content">
            <a href="#" class='sub1'>Submenu 1</a>
        </div>
    </div>
</div>
<!-- /page -->

CSS

.ui-sub-panel {
    width: 17em;
    position: absolute;
    top: 0;
    left: -17em;
    min-height: 100%;
    max-height: none;
}
.ui-sub-panel-open {
    -moz-transform: translate3d(17em, 0, 0);
    -webkit-transform: translate3d(17em, 0, 0);
    transform: translate3d(17em, 0, 0);
}
.ui-sub-panel-animate {
    -webkit-transition: -webkit-transform 300ms ease;
    -moz-transition: -moz-transform 300ms ease;
    transition: transform 300ms ease;
}
.ui-sub-panel-close {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.ui-sub-content {
    width: 100%;
}

JS

/* open submenu1 */
$('.sub1').on('click', function () {
    $('#submenu1')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
    $('.ui-sub-content')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass('ui-sub-panel-close');
});

/* close panel where close button is clicked */
$('.panel-close').on('click', function () {
    $(this)
        .closest(".ui-sub-panel")
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
    $('.ui-sub-content')
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
});

FIDDLE

如何在jQuery Mobile中独立嵌套面板？

1 个答案:

HTML

CSS

JS