html - 使用 CSS 最大高度过渡向上/向下滑动？

Question

我正在研究一种 Accordion slider ，它有几个选项卡，然后是一个内容 block ，单击选项卡标题时会向下滑动。我原本打算使用 jQuery slideToggle() 来完成此操作，但它非常不稳定，所以我决定尝试一种纯 CSS 方法。

我发现的大多数关于在 CSS 中执行此操作的文章都建议使用 max-height:0 和 max-height:9999px 并使用过渡动画。问题是，当我设置 max-height:0 时，填充似乎仍在显示并且内容也在显示。我该如何调整才能使整个下拉内容框隐藏然后向下滑动？

$(function() {
	$('.dropdown-title').click(function() {
  	$(this).parent().toggleClass('active');
  });
});

.dropdown-item {
	border:1px solid black;
}
	.dropdown-title {
		font-size:36px;
		padding:15px 30px;
		position:relative;
		cursor:pointer;
	}
    .dropdown-item.active .dropdown-title {
      background:#000;
      color:#fff;
    }
	.dropdown-content {
		max-height:0;
		padding:35px 30px;
        transition:max-height 0.5s;
	}
    .dropdown-item.active .dropdown-content {
      max-height:9999px;
    }
		.dropdown-content p strong:first-child {
			font-size:20px;
		}
		.dropdown-content p {
			padding-bottom:0;
			padding-top:25px;
			margin-bottom:0;
		}
			.dropdown-content p:first-child {
				padding-top:0;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-container">
  <div class="dropdown-item">
    <div class="dropdown-title">Lorem Ipsum</div>
    <div class="dropdown-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
      </p>
    </div>
  </div>
</div>

Answer 1

您需要在内容上overflow: hidden，并将填充移动到它处于事件状态时。

.dropdown-content {
    max-height: 0;
    transition: max-height 0.5s;
    overflow: hidden;
}

.dropdown-item.active .dropdown-content {
   max-height:9999px;
   padding: 35px 30px;
}