网页上的打开关闭部分？

Question

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

一个在右边，一个在左边，覆盖着陆页。

这两个部分都可以通过点击右侧的关闭按钮退出。

类似版块开合效果怎么做？

Answer 1

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

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

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

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

网页上的打开关闭部分？

Open-Close sections on a webpage?

javascript

jquery

webpage