重叠的面板

Question

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

https://codepen.io/jinzagon/pen/VwammbJ

HTML

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

CSS

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

JS

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

Answer 1

尝试为每个.reveal-up添加唯一的 id，然后修改您的revealPanel() 。 顺便说一句，我不确定revealPanel('.reveal-left','.panel-left', '.close'); .

 // 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'); $('#open').on('click', function() { $('.panel-up').hide();$('#1').show(); }); $('#close').on('click', function() { $('.panel-up').hide();$('#2').show(); }); // 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').hide();$('#1').show(); $('.panel-up').addClass('expanded'); $(".content").addClass('hidefor-panel-up'); $(".ip").addClass('hidefor-panel-up'); } }); });

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

 <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" id='open'>First Panel</a> <br> <a style="color:white;" href="#2" class="reveal-up" id='close'>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>