【问题标题】：creating jquery multiple panels创建jquery多个面板
【发布时间】：2014-09-28 06:12:05
【问题描述】：

我的页面上有一个面板可以按照我希望的方式工作，只需要知道在我继续使用面板之前是否可以 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>

关闭面板

页眉

打开面板

页脚

【问题讨论】：

“我的页面上有一个面板”帮助我们为您提供帮助：请分享您的相关代码。
我认为使用 JQM 面板不会那么容易做到这一点，尽管我记得在 SO 上看到过一个演示，其中多个面板在单击时一个接一个地打开，但我不记得链接.您也可以使用滑出框自己制作 -- 示例 -- stackoverflow.com/questions/26061191/… -- 教程 -- tympanus.net/codrops/2009/12/03/…

标签： jquery jquery-mobile

【解决方案1】：

根据我上面留下的评论，我为您创建了一个演示，可以同时打开 2 个面板。我不明白为什么你不能添加尽可能多的东西，只要你在屏幕上设置每个面板的位置，这样它们就不会重叠。至于再次禁用它们应该不难。

Demo将Demo窗口放大一点

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)  
    });

});

【讨论】：

哦，天哪，非常感谢您，您的救命稻草。 :)
我按照您的示例进行到最后一个细节，我没有编辑任何内容，但由于某种原因，当我尝试单独关闭面板时遇到了一些问题。我的面板位置正确，不确定这是否会有所不同。这是我的代码link
你的代码和我的演示有点不同。您在 (
）。您不需要它，因为我们没有使用 JQM 面板。我们做我们自己的面板。所以删除它。并确保您的演示包含标题和按钮以单击以打开面板。
没必要用jqm面板安妮。只需添加一个单击功能即可打开每个面板上的其他 2 个面板。 p.s 我把代码开头的盒子的动画取出到（-100）我们不需要它们，它们可以直接进入盒子css - jsfiddle.net/1yo43Lgf
您在 css 中看到每个盒子都有 (top:0) 这是盒子顶部的药水和零像素，所以更改为 (top:42px) 它下降了 42 像素，即页眉的高度。我将框高度设置为 (height:80%) 以防万一您也希望它超出页脚，因此如果不将其更改为 (90%)，因为我们从顶部牺牲了一些像素，并且 (100%) 将超过底部。很高兴您喜欢我的解决方案并使用它，目前使用此版本的 JQM 您不会找到更好的解决方案 -- 演示 jsfiddle.net/6oz9LL5o