html - 幻灯片下拉打开

Question

编辑: 我找不到没有 JS 的任何解决方案，所以我用 JavaScript 实现了它(解决方案作为答案)。

我正在尝试创建一个没有任何 JavaScript 的幻灯片打开下拉列表。我用谷歌搜索了一下，但找不到任何使用固定 height、使用固定 max-height 或 well.. JavaScript 的解决方案。

我做了什么:

我的元素与容器的高度相同，所以我可以只使用 3 倍的高度，但现在我有了另一个常量。

代码:

.dropdown_menu {
  display: inline-block;
  font-family: Arial;
  position: relative;
}

.dropdown_title {
  background-color: #505050;
  color: white;
  margin: 0;
  padding: 20px 50px;
}

.dropdown_content {
  background-color: #646464;
  position: absolute;
  width: 100%;
  z-index: 1; 
  height: 0;
  overflow: hidden;
  transition: height .3s;
}

.dropdown_content > * {
  color: white;
  display: block;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
}

.dropdown_content > *:hover {
  background-color: #7D7D7D;
}

.dropdown_menu:hover .dropdown_content {
 height: 300%;
}

<div class="dropdown_menu">
  <p class="dropdown_title">Dropdown</p>
  <div class="dropdown_content">
    <a href="">Option 1</a>
    <a href="">Option 2</a>
    <a href="">Option 3</a>
  </div>
</div>

是否可以创建这个？

Answer 1

使用 max-height 而不是 height，并将悬停时的最大高度设置为非常大。另请注意，过渡时间是相对于完整的最大高度的，因此您必须设置更长的过渡时间。

.dropdown_menu {
  display: inline-block;
  font-family: Arial;
  position: relative;
}

.dropdown_title {
  background-color: #505050;
  color: white;
  margin: 0;
  padding: 20px 50px;
}

.dropdown_content {
  background-color: #646464;
  position: absolute;
  width: 100%;
  z-index: 1; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
}

.dropdown_content > * {
  color: white;
  display: block;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
}

.dropdown_content > *:hover {
  background-color: #7D7D7D;
}

.dropdown_menu:hover .dropdown_content {
 max-height: 1000px;
}

<div class="dropdown_menu">
  <p class="dropdown_title">Dropdown</p>
  <div class="dropdown_content">
    <a href="">Option 1</a>
    <a href="">Option 2</a>
    <a href="">Option 3</a>
  </div>
</div>


<div class="dropdown_menu">
  <p class="dropdown_title">Dropdown</p>
  <div class="dropdown_content">
    <a href="">Option 1</a>
    <a href="">Option 2</a>
    <a href="">Option 3</a>
    <a href="">Option 4</a>
    <a href="">Option 5</a>
  </div>
</div>