javascript - 侧面板滑入时修改主要内容的CSS

Question

当右侧面板展开时，我想淡出页面内容，在背景中添加css position使其向左滑动，可以吗？展开面板时我无法修改内容，因为它没有收到事件类。尝试在 JS 中为内容添加“添加类”，但没有成功。

https://codepen.io/darcyvoutt/pen/rhtfk

<div class="nav">
    <a href="#" class="reveal-left">Left Panel</a>
    <a href="#" class="reveal-right">Right Panel</a>
</div>

<div class="panel-left">
  <div class="panel-content">
    <div class="close"></div>
    <div class="bottom">
      Some content here.
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
  </div>
</div>

<div class="panel-right">
  <div class="panel-content">
    <div class="close"></div>
    <p>Right Panel</p> 
    <div class="bottom">
      Some content here.
    </div>
  </div>
</div>

<div class="content">
  <h2>Side Panels Test</h2>
  <p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
    <ul>
      <li><code>ESC</code> - Close all windows</li>
      <li><code>L</code> - Open Right panel</li>
      <li><code>R</code> - Open Left panel</li>
    </ul>      
</div>

CSS

*, *: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: #84D5C5;
  line-height: 1.5em;  
  font-size: 15px;
}

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; }
////////////////////////
// Mixins 
////////////////////////

.transition(@property) {
  -webkit-transition: @property;
  transition: @property;
}

.boxStyle() {
  background: #ffffff; 
  padding: 50px;
}

.panels() {
  z-index: 10;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  background: #eeeeee; 
  position: fixed;
  display: block;
  bottom: 0;
  top: 0;
}

.panelClose() {  
  @size: 15px; 
  @margin: 5px;  
  line-height: @size;
  position: absolute;
  text-align: center; 
  cursor: pointer;  
  display: block;
  color: #000000;
  right: @margin;
  top: @margin; 
  height: @size;
  width: @size;
  content: "✖";  
}

////////////////////////
// Panels & Reveal 
////////////////////////

.panel { 
  @transition: all 1.5s ease-in-out;
  padding: 20px;
  
  &-content {
    position: relative;
    background: #efefef;
    padding: 30px 50px;
    overflow-y: auto;
    height: 100%;
    
    .close { 
      .panelClose();

      &:before { .panelClose(); }
    }
  }
  
  &-left {
    .panels();     
    .transition(@transition);
    left: -100%;
    width: 45%;
    
    &.expanded { left: 50px; }
  }
  
  &-right {
    .panels();       
    .transition(@transition);     
    right: -100%;    
    width: 50%; 
    
    &.expanded { right: 0; }
  }
}

.reveal {
  &-left {
    float: left;
  }
  &-right {
    float: right;
  }  
}

////////////////////////
// Layout 
////////////////////////

.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
  
  button {
    padding: 4px 6px;
  }
  
  a {
    font-weight: bold;
    color: #222;
  }
}

.content {
  .boxStyle();
  margin: 50px auto;
  position: relative;
  width: 90%;
}

.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');
    });
    
    // Close panel
    $(buttonClose).on('click', function() {
      $(panel).removeClass('expanded');
    });   
    
    // ESC to close Panel
    $(document).bind("keydown", function(e) {
      if (e.keyCode == 27) { $(panel).removeClass('expanded'); }    
    });
  }); 
}

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

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

Answer 1

您可以在右侧面板的展开/关闭上添加一个类，该类将:

• 通过将 opacity CSS 从 1 更改为 0.3(例如)淡化主要内容
• 使用 right 将其向右移动 0 到 50%(以匹配您的右侧面板)

.content CSS 中的transition 规则将使变化动起来。

(您在问题中只提到了右侧面板，但它也可以适用于左侧面板)。

查看工作片段:

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

revealPanel('.reveal-right','.panel-right', '.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-right').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-right');
    }
  });
});

.content {
  background: #ffffff;
  padding: 50px;
  margin: 50px auto;
  position: relative;
  width: 90%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;  
  opacity:1;
  right:0;
}
.content.hidefor-panel-right { 
    opacity:0.3;
    right: 50%;
}


*,
*: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: #84d5c5;
  line-height: 1.5em;
  font-size: 15px;
}
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: #000000;
  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: #000000;
  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-right {
  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;
  right: -100%;
  width: 50%;
}
.panel-right.expanded {
  right: 0;
}
.reveal-left {
  float: left;
}
.reveal-right {
  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">
    <a href="#" class="reveal-left">Left Panel</a>
    <a href="#" class="reveal-right">Right Panel</a>
</div>

<div class="panel-left">
  <div class="panel-content">
    <div class="close"></div>
    <div class="bottom">
      Some content here.
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
  </div>
</div>

<div class="panel-right">
  <div class="panel-content">
    <div class="close"></div>
    <p>Right Panel</p> 
    <div class="bottom">
      Some content here.
    </div>
  </div>
</div>

<div class="content">
  <h2>Side Panels Test</h2>
  <p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
    <ul>
      <li><code>ESC</code> - Close all windows</li>
      <li><code>L</code> - Open Right panel</li>
      <li><code>R</code> - Open Left panel</li>
    </ul>      
</div>