在网页上打开关闭部分？

Question

在site上，向下滚动几次以显示图块。单击任何将显示两个部分的图块。

一个来自右侧，另一个来自左侧并覆盖着陆页。

点击右侧的关闭按钮即可退出两个部分。

如何对章节进行类似的开闭效果？

Answer 1

＆＃13;

＆＃13;

$(document).on('click','#boxes div', function(e){
  $('body').addClass('show-menus');
});

$(document).on('click','.close', function(e){
  $('body').removeClass('show-menus');
});

＆＃13;

#boxes div {
  display:inline-block;
  width:20%; padding-bottom:20%;
  background:red;
  cursor:pointer;
}
#boxes div:nth-child(even) {
  background:blue;
}
#boxes div:hover {
  opacity:0.5;
}

.left, .right {
  transition:600ms ease-in-out transform;
  position:fixed; top:0; height:100vh;
}

.left {
  background:green; width:60%;
  left:0;
  transform:translate3d(-100%,0,0);
}

.right {
  background:purple; width:40%; 
  right:0;
  transform:translate3d(100%,0,0);
}

.show-menus .left, .show-menus .right {
  transform:translate3d(0,0,0);
}

.right .close {
  position:absolute; 
  top:10px; right:0;
  cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="boxes">
  <div></div><div></div><div></div><div></div><div></div>
</div>

<div class="left"></div>
<div class="right"><button class="close">close</button></div>

＆＃13;

＆＃13;

＆＃13;