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

Question

如何使ul li网格像下面的图片一样展开

​

​

我的意思是，当我点击每一个缩略图时，更大的盒子会在它们下面展开(每一个点击的缩略图)，如果可能的话，比如切换或滑动效果。

它更像google的图像功能，但我只需要适当的方法来扩展网格中的框，而不需要插件

谢谢

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>

​