实现平滑的div切换

Question

我正在尝试在此页面上重新创建“div toggle”效果，但使用jQuery：

cordon-bleu.se

我想要这个效果，但是像上面一样工作：当你点击显示另一个时，隐藏了可见的div：

sohtanaka.com/web-design/easy-toggle-jquery-tutorial /

到目前为止我的javascript是：

$(document).ready(function(){

 $("h2.menutrigger").click(function(){
  $('.active').removeClass('active').slideToggle("slow");
  $(this).next().addClass('active').slideToggle("slow");
 });

});

这些是我试图切换的div：

<div class="menuitem active">
 <img src="images/img_header.png" style="margin: 15px auto;"/>
</div>
<h2 class="menutrigger"><a href="#">Historia</a></h2>
<div class="menuitem">
 <p>Bla bla</p>
 <p>Bla Bla</p>
</div>
<h2 class="menutrigger"><a href="#">Spisar</a></h2>
<div class="menuitem">
 <p>Bla bla</p>
</div>

这是我的（相关的）css：

.menuitem {
 height: 385px;
 background-color: #000;
 display:none;
}

.active {
 display: block;
}

您现在可以看到here它的工作原理。

我感谢任何帮助。

Answer 1

简单的解决方案是从display: block;类中删除.active语句，让jQuery通过slideToggle()为您处理显示设置。