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>

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

1 个答案: