页眉

Question

我的页面上有一个面板，它按照我希望的方式工作，只需要知道我继续使用面板之前就可以了 1.多面板同时打开？（我想打开两个或更多面板，每次打开一个新面板时，其他所有面板都被取消激活，唯一的活动面板就是打开的面板）

如果没有，任何人都可以推荐一个解决上述问题的好方法。

如何在面板打开时取消激活页面

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanelDefault"> 
<h2>Panel Header</h2>
<p>You can close the panel b:</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a     ui-icon-delete ui-btn-icon-left">Close panel</a>
</div> 
<div data-role="panel" id="myPanelFixed" data-position-fixed="true"> 
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>

关闭面板

页眉

打开面板

页脚

Answer 1

从上面留下的评论中，我创建了一个演示，可以同时打开2个面板。我不明白为什么你不能添加任意多的你想要你设置屏幕上的每个面板位置，以便它们不会重叠。至于再次禁用它们并不难。

演示稍微扩大演示窗口

http://jsfiddle.net/0mfgquv6/

<强> Jquery的

$('#box').animate({'left':'-100%'},0) 
$('#box2').animate({'left':'-100%'},0) 

$(function() {

    $('#openpanel').click(function(){

        $('#box').animate({'left':'0'},500);
        $('#box2').animate({'left':'60%'},500);

        });

    $('#close').click(function(){

        $('#box').animate({'left':'-100%'},500) 

    });

     $('#close2').click(function(){

        $('#box2').animate({'left':'-100%'},500)  
    });

});

创建jquery多个面板

页眉

页脚

1 个答案: