使用jquery在网格缩略图中展开div

Question

如何将ul li网格扩展为如下图所示＆gt;

我的意思是，当我点击每个缩略图时，较大的框会在它们下方展开（每个点击的缩略图），如果可能，如切换或上下滑动效果

它更像是谷歌图片功能，但我只需要正确的方法来扩展网格中的框，没有插件

由于

Answer 1

这样的东西？

$("#items li").click(function(){
  
  $("#items li.big-cloned").remove();
  var li=$(this);
  var cloned=li.clone().addClass('big-cloned');
  li.after(cloned);
  
  
});

ul li{

  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid;
  margin:10px;
  text-align:center;
}

li.big-cloned{
   display: block;
  float: right;
  width: 89%;
  margin: 0 9%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  </ul>