Question

我正在投资组合网站上工作，我对如何展示我的工作有了一个想法，但我正在努力弄清楚如何以我想要的方式实现它。

这个想法是让一个页面充满图像，在网格状模式中，然后点击图像上的链接，项目的描述会在它旁边滑出，移动其他图像（和如果线已满，则换新线。该网站也将具有响应性，因此每条线上的图像数量将根据设备而变化。

这个JSFiddle显示了我目前拥有的内容以及使用时的样子：http://jsfiddle.net/k7NFu/2/

这就是我对HTML标记的想法，但显然在必要时进行任何更改（请参阅小提琴获取更多信息）：

<li>
    <div class="overlay"> <a href="#" class="view_project">View Project</a>
        <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" alt="Title">
    </div>
    <div class="description">
        <p>Quisque augue lectus, interdum id lectus nec, pulvinar mollis sapien. Phasellus sed consectetur sapien. Integer gravida mauris vitae elit vestibulum, tincidunt volutpat leo vulputate. Vivamus at nibh massa.</p>
    </div>
</li>

我过去曾尝试使用.slideToggle()，但只允许垂直扩展（我认为），所以我们非常感谢你们的任何想法。

谢谢！

Answer 1

您可以使用以下

向左/向下滑动

 $(this).hide("slide", { direction: "left" }, 1000);
 $(this).show("slide", { direction: "left" }, 1000);

但你需要jquery ui以及

编辑：

完整的工作示例：http://jsfiddle.net/xcy8Y/

HTML

 <div id=trigger>Open/Close</div><div class=hidden>Hidden info box</div>

jQuery

 //... Previous code
 $("#trigger").click(function(){
      $(".hidden").toggle("slide", { direction: "left" }, 1000); 
 });
 // Rest of code ...

<强> CSS

 .hidden{
      display: none
 }
 div{
      float: left;
 }

当然你可以在div标签中放置你想要的东西，在你的情况下可能是图片。

Answer 2

Check this fiddle

jQuery：

$('.description').css({'display':'none'});
$('.opened').on('click','.overlay',function(){
    $(this).next('.description').slideToggle();
});

我如何创建这样的扩展内容？

2 个答案:

Check this fiddle