jquery - 如何为特定布局组织 div

Question

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

我希望扩展的 div 下推其下一行的缩略图 div，如图所示。

This是错误生成配置的简化 fiddle

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'});
    });
});