1

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

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

这是我所拥有的：

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

1 回答 1

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');
    });    
});
于 2013-05-17T16:28:09.197 回答