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

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

HTML

我认为只需解除listener$document的绑定即可；这是可行的，但却产生了一个意想不到的结果。它将改变面板的性质，以便在点击几下后，您需要打开以关闭，反之亦然

我也尝试过在面板上停止事件传播，但也没有成功

我创建了一个用于帮助调试的

---

非常感谢您的帮助

通过@Omar的tip创建了一个解决方案。此分叉会在内容中而不是在面板中创建嵌套。下面提供给未来的开发人员

HTML JS

---

您可以创建多层次的面板以及编写好的问题。

<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>

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

<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 -->

.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%;
}

/* 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");
});