Question

我有一个带有多个浮动div的Wordpress网站。每个div后面都有一个slideToggle，可以打开更多内容。

现在我的问题是，所有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

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

Answer 1

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

<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。

Answer 2

一种解决方案是使用opacity:0代替jQuery(".event_body").hide();

<强> CSS

.event_body{opacity: 0;}

然后在js：

jQuery(".event_head").click(function(){
    if($(this).next().css("opacity") == "0"){
    jQuery(this).next(".event_body").animate({
        opacity: 1
    }, 2000);
    }
    else{
         jQuery(this).next(".event_body").animate({
        opacity: 0
    }, 1000);
    }
});

fiddle

使用SlideToggle浮动div

2 个答案: