如何组织特定布局的div

Question

我正在尝试创建一个具有预览缩略图的部分，并且在单击预览时，将在同一页面中打开包含与该部分相关的扩展内容的div。这是一个例子：

我希望扩展div按下它下面的行上的缩略图div。如图所示。

This是一个简化的小提琴，错误的生成配置

HTML：

<div class="container">
    <div class="preview"></div>
    <div class="extended"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
    <div class="preview"></div>
</div>

CSS：

.container {
    position: relative;
    width: 200px;
    height: 200px;
}
.preview {
    width: 50px;
    height: 50px;
    background: #c35;
    position: relative;
    float: right;
    margin-left: 1px;
    margin-bottom: 1px;
}
.preview:hover {
    background: #f90;
}
.extended {
    width: 152px;
    height: 0;
    display: none;
    background: #f90;
    position: relative;
    float: right;
    margin-bottom: 1%;
}

的jQuery

$(document).ready(function () {
    $('div.preview').click(function () {            
        $('div.extended').css('height', 50);
        $('div.extended').css('display', 'block');
    });
});

任何人都可以帮我解决这个问题吗？

Answer 1

如果您可以更改扩展元素的DOM位置，那么这将起作用。我已经分配了两个custom attributes，这些从HTML5 开始有效，并且稍微更改了您的DOM，因此通过点击相关的div，您将获得相应的折叠内容。

Demo

Demo 2 （保持活跃状态​​）

$(document).ready(function () {
    $('div.preview').click(function () {
        $('div.extended').css({'display':'none'});
        $('div.extended[data-preview="'+ $(this).attr('data-bind') +'"]').css({'display':'block'});
    });
});

Answer 2

Example fiddle ::然后你应该在三个预览div之后放置扩展div：

<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="extended"></div>

然后动态处理预览和扩展之间的链接。

Answer 3

您需要在3个extended div之后添加preview div。它工作正常。

UPDATED FIDDLE

Answer 4

你的意思是你想让它与它下方的div重叠而不是将它们推下来吗？在这种情况下，请在position: absolute div上使用extended，而不是将其隐藏height:0，请将其隐藏display:none，以便在需要时将其更改为display:block透露它。这样，它将与现有的预览div重叠。