jQuerymobile：打开面板时关闭弹出窗口答案

【问题标题】：jQuerymobile: Close a popup when opening a paneljQuerymobile：打开面板时关闭弹出窗口
【发布时间】：2013-05-17 16:18:08
【问题描述】：

我有一个导航菜单，它是一个列表视图，位于弹出窗口内的可折叠列表中。在我的页面内容上，我也有常规链接打开与菜单相同的页面。我希望其中一些链接在面板中打开。这适用于页面内容，面板打开正常。

但是当您使用导航菜单中的链接时，面板会在菜单下方打开。有没有办法强制面板在导航上打开，或者在面板打开时关闭导航？

这是我所拥有的：

<!--NAVIGATION -->
<a href="#navigation" data-rel="popup"">Menu</a>
<div data-role="popup" id="navigation">
 <div data-role="collapsible-set">
  <div data-role="collapsible">
   <h2>Category 1</h2>
   <ul data-role="listview">
    <li><a href="#panel1">Open Panel 1</a></li>
   </ul>
  </div><!-- /collapsible -->

  <div data-role="collapsible">
   <h2>Category 2</h2>
   <ul data-role="listview">
    <li><a href="#panel2">Open Panel 2</a></li>
   </ul>
  </div><!-- /collapsible -->
 </div><!-- /collapsible set -->
</div><!-- /popup -->
<!-- /NAVIGATION -->

<!-- CONTENT -->
<ul data-role="listview">
<li><a href="#panel1">Open Panel 1</a></li>
</ul>
<!-- /CONTENT -->

<!-- PANEL -->
<div data-role="panel" id="panel1" data-position="right" data-display="overlay" data-position-fixed="true">
 <p>content</p>
</div><!-- /panel1-->
<!-- /PANEL -->

【问题讨论】：

标签： jquery jquery-mobile jquery-mobile-panel jquery-mobile-popup

【解决方案1】：

它可以通过 javascript 以编程方式完成。从导航 li 元素中删除 href。给它绑定一个点击事件，触发面板打开和弹出关闭状态。

工作示例：http://jsfiddle.net/Gajotres/2Hv5f/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">

            <!-- CONTENT -->
            <ul data-role="listview">
            <!--NAVIGATION -->
            <a href="#navigation" data-rel="popup">Menu</a>
            <div data-role="popup" id="navigation">
                <div data-role="collapsible-set">
                    <div data-role="collapsible">
                        <h2>Category 1</h2>
                        <ul data-role="listview">
                            <li><a href="#" id="popup-panel1">Open Panel 1</a></li>
                        </ul>
                    </div><!-- /collapsible -->
                </div><!-- /collapsible set -->
            </div><!-- /popup -->
            <!-- /NAVIGATION -->                
                <li><a href="#panel1">Open Panel 1</a></li>
            </ul>
            <!-- /CONTENT -->

            <!-- PANEL -->
            <div data-role="panel" id="panel1" data-position="left" data-display="overlay" data-position-fixed="true">
                <p>content</p>
            </div><!-- /panel1-->
            <!-- /PANEL -->
        </div>    
    </body>
</html>

Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#popup-panel1', function(){
        $('#panel1').panel('open');
        $('#navigation').popup('close');
    });    
});

【讨论】：

实际上，如果我可以要求跟进...我有多个页面（#index、#contact、#locations 等）我想知道如何编辑 $(document).on ('pagebeforeshow', '#index', function() 与所有其他主题标签一起工作，而不仅仅是#index
谢谢，我也试过了，但它只适用于主页。一旦我导航到另一个页面，它就不起作用了
然后试试：$(document).on('pagebeforeshow', '[data-role="page"]',function() {
不走运。它实际上适用于真实的单个页面，但不适用于多页设置。即：#index，#contact，#locations都是一页上的段，然后我还有其他真正的php页面。当我在真实页面上时，该修复工作有效，但在多页面内无效。我现在只是把所有东西都变成了真实的页面，直到我弄明白为止。感谢您的帮助