Javascript 重叠窗格

我有两个面板，有相同的类，但有两个不同的内容。每当我单击第一个面板的第一个链接或第二个面板的第二个链接时，它们都会同时显示，形成重叠。我尝试为每一个添加两个ID，但似乎不起作用

HTML

CSS

JS

---

尝试为每个

添加唯一id。向上显示
，然后修改您的
RevalPanel（）
。顺便说一句，我不确定什么是函数
revealPanel（'.discover left'，'.panel left'，'.close'）


//显示和关闭面板
var revealPanel=功能（按钮预览、面板、按钮关闭）{
$（文档）.ready（函数（）{
//展示板
$（按钮显示）。在（'单击'，函数（）上）{
$（panel.addClass（'expanded'）；
console.log（'hidefor-'+面板）；
$（“.content”）.addClass（'hidefor-'+panel.substr（1））；
$（“.ip”）.addClass（'hidefor-'+panel.substr（1））；
});
//封闭面板
$（按钮关闭）。在（'单击'，函数（）上）{
$（panel.removeClass（'expanded'）；
$（“.content”）.removeClass（'hidefor-panel-up'）；
$（“.ip”）.removeClass（'hidefor-panel-up'）；
});   
//ESC关闭面板
$（文档）.bind（“向下键”，函数（e）{
如果（e.keyCode==27）{
$（panel.removeClass（'expanded'）；
$（“.content”）.removeClass（'hidefor-panel-up'）；
$（“.ip”）.removeClass（'hidefor-panel-up'）；
}    
});
}); 
}
revealPanel（'向上显示'，'向上面板'，'向上关闭'）；
//revealPanel（“.REVEL left”、“.panel left”、“.close”）；
$（'#open'）。在（'单击'，函数（）上）{
$（'.panel up'）.hide（）；$（'#1'）.show（）；
});
$（'#close'）。在（'单击'，函数（）上）{
$（'.panel up'）.hide（）；$（'#2'）.show（）；
});
//显示带有快捷方式的面板
$（文档）.ready（函数（）{
$（文档）.bind（“向下键”，函数（e）{
如果（e.keyCode==76）{
console.log（例如keyCode）；
$（'.panel left'）.addClass（'expanded'）；
}
如果（e.keyCode==82）{
$（'.panel up'）.hide（）；$（'#1'）.show（）；
$（'.panel up'）.addClass（'expanded'）；
$（“.content”）.addClass（'hidefor-panel-up'）；
$（“.ip”）.addClass（'hidefor-panel-up'）；
}
});
});
.content{
填充：50px；
位置：绝对位置；
宽度：90%；
-webkit过渡：全部.7秒轻松；
过渡：全部。7秒轻松；
变换：比例（1）；
不透明度：1；
底部：10%；
}
.content.hidefor-panel-up{
底部：20%；
变换：比例（0.95）；
不透明度：0；
}
.ip{
显示：块；
宽度：100%；高度：100%；
对象匹配：覆盖；
位置：绝对位置；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
不透明度：1；
排名：0；
不透明度：1；z指数：-5；位置：绝对；
}
.ip.hidefor-panel-up{
不透明度：1；
排名前10%；
}
*,
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
填充：0；
保证金：0；
}
身体{
字体系列：“Lucida控制台”，摩纳哥，monospace；
背景#06113E；
线高：1.5em；
字体大小：15px；
溢出：隐藏；
}
代码{
边框：1px实心#dddddd；
背景：#efef；
边界半径：3px；
填充物：3px 5px；
}
h1，
h2，
h3{
边缘底部：0.5em；
}
保险商实验室{
利润率：30px 40px；
}
李{
保证金：5px0；
}
.小组{
填充：20px；
}
.小组内容{
位置：相对位置；
/*背景：#efef*/
填充：30px 50px；
溢出y：自动；
身高：100%；
}
.面板内容。关闭{
线高：15px；
位置：绝对位置；
文本对齐：居中；
光标：指针；
显示：块；
颜色：#ffffff；
右：5px；
顶部：5px；
高度：15px；
宽度：15px；
内容：“✖";
}
.面板内容。关闭：之前{
线高：15px；
位置：绝对位置；
文本对齐：居中；
光标：指针；
显示：块；
颜色：#ffffff；
右：5px；
顶部：5px；
高度：15px；
宽度：15px；
内容：“✖";
}
.左面板{
z指数：10；
盒影：0.10px rgba（0,0,0,0.5）；
背景：#eeeeee；
位置：固定；
显示：块；
底部：0；
排名：0；
-webkit过渡：所有0.3秒轻松；
过渡：所有0.3秒缓解；
左-100%；
宽度：45%；
}
.panel-left.expanded{
左：0；
}
.小组讨论{
z指数：10；
位置：固定；
显示：块；
底部：0；
-webkit过渡：全部.7秒轻松；
过渡：所有0.7秒都会变缓；
底部-20%；
宽度：100%；
}
.panel-up.expanded{
底部：0；
}
.向左转{
浮动：左；
}
.揭露{
浮动：对；
}
.导航{
填充：10px；
保证金：0自动；
高度：10px；
宽度：90%；
}
.导航按钮{
填充：4px6px；
}
.导航a{
字体大小：粗体；
颜色：#222；
}
.底部{
背景：黄色；
显示：块；
位置：固定；
宽度：100%；
底部：0；
}



第一个面板
第二个面板
Lorem ipsum Door sit amet，是一位杰出的献祭者。Suspendisse Ultrices aliquet quam quis faucibus。nibh hendrerit ex lobortis tristique的大师。但hendrerit aliquet lacus，sed bibendum nisl dapibus non。Etiam eleifend eu ipsum在varius。Nam metus odio，Placert eu lacus quis，euismod finibus magna


ESC
-关闭所有窗口
R>
-按“R”打开面板

谢谢您的回复，但您的代码不起作用。第一个面板不再起作用。函数“revealPanel（'.reveal left'、'.panel left'、'.close'）；。来自旧测试别担心。@SeitoKimbo是
你的意思是不工作？是的不工作。如果你能直接修改代码，我将非常感激。谢谢！我在每个链接中添加了一个单击功能，您可以看到它就在
//revealPanel（“.reveal left”，“.panel left”，“.close”）下面。接受此答案，以便将您的问题标记为已解决。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">

    <a style="color:white;" href="#1" class="reveal-up">First Panel</a>
<br>
<a style="color:white;" href="#2" class="reveal-up">Second panel</a>
</div>

<div class="panel-up" id="1">
  <div class="panel-content">
    <div class="close"></div>
    <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p> 
  </div>
</div>

<div class="panel-up" id="2">
  <div class="panel-content">
    <div class="close"></div>
    <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p> 
  </div>
</div>


<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">

  <h2 style="margin-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies aliquet quam quis faucibus. Maecenas at nibh hendrerit ex lobortis tristique. Ut hendrerit aliquet lacus, sed bibendum nisl dapibus non. Etiam eleifend eu ipsum at varius. Nam metus odio, placerat eu lacus quis, euismod finibus magna.</p>
    <ul>
      <li><code>ESC</code> - Close all windows</li>
      <li><code>R></code> - Open panel with pressing "R" </li>
    </ul>      
</div>

    .content {
      padding: 50px;
      position: absolute;
      width: 90%;
      -webkit-transition: all .7s ease;
      transition: all .7s ease;  
    
      transform: scale(1);
      opacity:1;
      bottom:10%;
    }
    .content.hidefor-panel-up { 
        bottom: 20%;
        transform: scale(0.95);
        opacity:0;
    }
    
    .ip {
      display:block;
      width:100%; height:100%;
      object-fit: cover;
      position: absolute;
      -webkit-transition: all 1s ease;
      transition: all 1s ease;  
      opacity:1;
      top:0;
      opacity:1; z-index:-5; position:absolute;
    }
    .ip.hidefor-panel-up { 
        opacity:1;
        top: 10%;
    }
    
    
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    body {
      font-family: "Lucida Console", Monaco, monospace;
      background: #06113E;
      line-height: 1.5em;
      font-size: 15px;
      overflow: hidden;
    }
    code {
      border: 1px solid #dddddd;
      background: #efefef;
      border-radius: 3px;
      padding: 3px 5px;
    }
    h1,
    h2,
    h3 {
      margin-bottom: 0.5em;
    }
    ul {
      margin: 30px 40px;
    }
    li {
      margin: 5px 0;
    }
    .panel {
      padding: 20px;
    }
    .panel-content {
      position: relative;
      /*background: #efefef;*/
      padding: 30px 50px;
      overflow-y: auto;
      height: 100%;
    }
    .panel-content .close {
      line-height: 15px;
      position: absolute;
      text-align: center;
      cursor: pointer;
      display: block;
      color: #ffffff;
      right: 5px;
      top: 5px;
      height: 15px;
      width: 15px;
      content: "✖";
    }
    .panel-content .close:before {
      line-height: 15px;
      position: absolute;
      text-align: center;
      cursor: pointer;
      display: block;
      color: #ffffff;
      right: 5px;
      top: 5px;
      height: 15px;
      width: 15px;
      content: "✖";
    }
    .panel-left {
      z-index: 10;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      background: #eeeeee;
      position: fixed;
      display: block;
      bottom: 0;
      top: 0;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      left: -100%;
      width: 45%;
    }

.panel-left.expanded {
  left: 0;
}
.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {
  float: right;
}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}

.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}

// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click', function() {
      $(panel).addClass('expanded');
      console.log('hidefor-'+panel);
      $(".content").addClass('hidefor-'+panel.substr(1));
      $(".ip").addClass('hidefor-'+panel.substr(1));
    });
    
    // Close panel
    $(buttonClose).on('click', function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
            $(".ip").removeClass('hidefor-panel-up');
    });   
    
    // ESC to close Panel
    $(document).bind("keydown", function(e) {
      if (e.keyCode == 27) { 
          $(panel).removeClass('expanded'); 
          $(".content").removeClass('hidefor-panel-up');
         $(".ip").removeClass('hidefor-panel-up');
      }    
    });
  }); 
}

revealPanel('.reveal-up','.panel-up', '.close');
revealPanel('.reveal-left','.panel-left', '.close');


// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown", function(e) {
    if (e.keyCode == 76) { 
    console.log(e.keyCode);
        $('.panel-left').addClass('expanded'); 
    }
    if (e.keyCode == 82) { 
        $('.panel-up').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-up');
        $(".ip").addClass('hidefor-panel-up');
    }
  });
});