jquery - 在插入额外内容时保持一行 float DIV 不断填充

Question

我有一些 float 预览-div。单独的 div 中有一些额外的内容，这些内容最初是隐藏的，单击时会打开。这个额外的内容占据了整个宽度并自然地将 float div 分开 - 我不想覆盖预览 div。

现在看起来像这样:

有没有办法不破坏 float 或插入一些以下预览 div，以便实际行保持填充状态？

我想看起来像这样:

Here is a FIDDLE

HTML:

<div class="preview">1</div>
<div class="content"><h2>Additional Information</h2><p>Some content.</p>
</div>
<div class="preview">2</div>
<div class="content"><h2>Additional Information</h2><p>Some content.</p>
</div>
<div class="preview">3</div>
<div class="content"><h2>Additional Information</h2><p>Some content.</p>
</div>
<div class="preview">4</div>
<div class="content"><h2>Additional Information</h2><p>Some content.</p>
</div>
<div class="preview">5</div>
<div class="content"><h2>Additional Information</h2><p>Some content.</p>
</div>
<!-- ... and more like so //-->

CSS:

.preview {
width: 150px;
height: 150px;
border: solid 10px #fff;
float: left;
background-color:#999;
text-align: center;
cursor: pointer;
}
.preview.active {
background-color:#CCC;
border-bottom-color: #CCC;
}
.content {
clear: left;
width: 80%;
margin: 20px 0;
padding: 5% 10%;
background-color:#CCC;
display: none;
}

jQuery 脚本:

jQuery('.preview').click(function(){
if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $('.content.show').slideToggle(500, function(){
        $('.content.show').removeClass('show');
    });
}
else if ($('.preview').hasClass('active')) {
    $('.preview').removeClass('active');
    $('.content.show').slideToggle(500, function(){
        $('.content.show').removeClass('show');
    });
    $(this).addClass('active');
$('.active + .content').slideToggle(500, function(){
        $('.active + .content').addClass('show');
    });
}
else {
$(this).addClass('active');
$('.active + .content').slideToggle(500, function(){
        $('.active + .content').addClass('show');
    });
}   
});

Answer 1

这是让您快速入门的方法，使用绝对定位。它有一些小问题，还没有完成，但正如我所说，只是开始。我重构了 jQuery 代码，将 .content div 放在 .preview div 中，并添加了一些 CSS。

http://jsfiddle.net/awv6gx4m/2/

HTML:

<div class="preview">
    2
    <div class="content"><h2>Additional Information</h2>
        <p>Some content.</p>
    </div>
</div>

CSS:

.content {
    clear: left;
    margin: 20px 0;
    padding: 5% 10%;
    background-color:#CCC;
    display: none;
    position: absolute;
    top: 150px;
    left: 15px;
    width: 500px;
}

jQuery:

jQuery('.preview').click(function() {
    $('.content').not($(this).find('.content')).slideUp(500);
    $(this).find('.content').slideToggle(500, function(){
        $('.content.show').removeClass('show');
    });
});