如何创建具有平滑Javascript过渡的垂直手风琴菜单？

Question

我目前正在尝试创建一个垂直手风琴菜单，该菜单可以使用Javascript平滑地滑动打开和关闭。

目前，我一直在使用的javascript代码如下所示：

$(document).ready(function(){
  $(".btn1").click(function(){
    $(".expand1").slideToggle('slow', "swing", function () {
  });
});

$(".btn2").click(function(){
  $(".expand2").slideToggle('slow', "swing", function () {
   });
}); 

我的HTML：

<tr class="btn1">
   TITLE HERE
</tr>
<tr>
<td class="expand1">
   TEXT GOES HERE   
</td>
</tr>

但是我发现该代码使开头和结尾的过渡非常混乱。

是否有另一个代码可以平滑过渡？

Answer 1

您可能想要这样的东西。

 jQuery(".box h1").click(function(){ if ( jQuery(this).parent().hasClass("open") ) { jQuery(".box").removeClass("open"); } else { jQuery(".box").removeClass("open"); jQuery(this).parent().addClass("open"); } }); 

 #accordeon { width:300px; background:red; } .box { max-height:50px; text-align:center; overflow:hidden; transition: all 1s; } .box.open { max-height:500px; } .box h1 { height:50px; line-height:50px; margin:0; padding:0; } .box p { padding: 50px 0; background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordeon"> <div class="box"> <h1> Title </h1> <p>Lorem ipsum</p> </div> <div class="box"> <h1> Title </h1> <p>Lorem ipsum</p> </div> </div>