javascript - 带 SlideToggle 的 float div

Question

我有一个包含多个 float div 的 WordPress 网站。每个 div 后面都有一个 SlideToggle，可以打开更多内容。

我现在的问题是，所有 div 都应该保持在原位，只有打开的应该展开。现在，div 交换了位置，并且一行中的所有其他 div 都变大了。

html

<div>
<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->



<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->



<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->






<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->
</div>

CSS

.span4 {
    float:left; 
    margin-right: 2%;
    width: 32%;
    margin-bottom: 40px;
}

.span4{width: 32%;}
.span4:nth-child(3n) {margin-right: 0;} 

js

$(document).ready(function(){

//hide the all of the element with class msg_body
jQuery(".event_body").hide();

//toggle the componenet with class msg_body
jQuery(".event_head").click(function(){
jQuery(this).next(".event_body").slideToggle();
});


});

这是我迄今为止所拥有的 fiddle 。

fiddle

这是我想要的图像。 http://www.rhodesign.ch/slidetoggle.jpg

Answer 1

您需要创建 3 列才能格式化您的内容。

<div class="col">
    <!-- your content for this col -->
</div>
<div class="col">
    <!-- your content for this col -->
</div>
<div class="col">
    <!-- your content for this col -->
</div>

我还清理了你的 html ；你正在为许多无用的 div 创建方法。检查这个fiddle .