奇怪的手风琴行为和最大高度

13 浏览
0 Comments

奇怪的手风琴行为和最大高度

我正在创建一个手风琴效果，但由于在`height: 0`和`height: auto`之间的过渡无法进行动画，所以我尝试使用`max-width`进行动画效果。\n但是，如你所见，这种方式的时间轴不好，在打开用户点击的那个之前关闭其他的。\n有没有办法解决这个问题？\n

.content {
  overflow: hidden;
  max-height: 0;
  transition: all 1s;
}
.active .content {
  max-height: 500px;
}

\n点击这里查看示例\n更新：
\n问题出在最大高度上，使用特定高度的时候效果很好。

0

3 答案

0 Comments

奇怪的手风琴行为与最大高度有关

问题出现的原因是没有使用jQuery UI Accordion。

解决方法是使用jQuery UI Accordion，添加以下代码：

<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>    
<div id="accordion">
  <h3>Part1</h3>
  <div> <p>  1  </p> </div>
  <h3>part2</h3>
  <div> <p>  2  </p> </div>
  <h3>Part3</h3>
  <div>  <p>   3  </p>  </div>
  <h3>Part4</h3>
  <div>  <p>  4 </p>  </div>
</div>
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</body>

0
0 Comments

Strange accordion behavior with max-height这个问题的出现的原因是因为在代码中使用了错误的removeClass方法。解决方法是将代码中的.removeClass方法移除。

以下是解决问题的代码：

$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).addClass("active").siblings("active");
});
});

0
0 Comments

奇怪的手风琴行为与max-height的问题出现的原因可能是由于计算实际高度的问题。在使用max-height时，可能很难在同一DOM子树上同时运行其他过渡效果，并且将动画排队。这可能是因为在其他过渡效果运行时，很难推导出必须应用的实际高度。

解决这个问题的方法之一是将max-height替换为height，并设置一个固定的高度。这样可以确保过渡效果同时进行。但是，如果无法设置固定高度，可以使用jQuery的slideUp()和slideDown()方法来解决问题。

以下是一个使用jQuery和CSS的示例代码：

HTML代码：


  
Header 1

  
Content 1





  
Header 2

  
Content 2

CSS代码：

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}
.accordion.active .accordion-content {
  max-height: 500px;
}

JavaScript代码：

$(document).ready(function(){
  $(".accordion-header").on("click", function(){
    $(this).parent().toggleClass("active");
  });
});

以上代码中，点击手风琴的标题时，会通过toggleClass()方法在手风琴的父元素上添加或移除active类。active类会将max-height设置为一个较大的值，从而展开手风琴内容，再次点击标题时则会收起内容。

这样，无论手风琴内容的高度是多少，都可以通过添加或移除active类来实现展开和收起的效果，而不需要计算实际高度。

希望这可以解决你的问题！

0