Question

编辑：如果没有JS，我找不到任何解决方案，因此我使用JavaScript来实现（解决方案作为答案）。

我正在尝试创建一个没有任何JavaScript的幻灯片打开下拉列表。我已经用Google搜索了一下，但是使用固定的height，固定的max-height或其他方法都找不到任何解决方案。.JavaScript。

我所做的事情：

我的元素与我的容器height相同，因此我可以使用高度的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>

Answer 2

所以我制定了 JavaScript解决方案，并将其提供给以后使用：）

这是我的代码：

"use strict";

document.querySelectorAll('.aDropdown').forEach(dropdown => {
  let body = dropdown.children[1];
  let titleHeight = dropdown.children[0].clientHeight;

  dropdown.style.height = titleHeight + "px";

  // Mouse enter listener
  dropdown.addEventListener('mouseenter', () => {
    // Variables
    let bodyHeight = 0;
    let selectionAmount = body.children.length;

    // Get the height of all children
    for(let i = 0; i < selectionAmount; i++) 
      bodyHeight += body.children[i].clientHeight;
  
    // Set the container to a certain height
    dropdown.style.height = (titleHeight + bodyHeight) + "px";
  });
  // Mouse leave listener
  dropdown.addEventListener('mouseleave', () => {
    dropdown.style.height = titleHeight + "px";
  });
});

body {
  background-color: white;
  font-family: Arial;
}
/* ABOVE THIS IS JUST PAGE STYLING */

.aDropdown {
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  border: 1px solid rgb(165, 165, 165);
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: height .3s;
}
.aDropdown > .title {
  margin: 0;
  padding: 10px 20px;
}

.aDropdown > .body > * {
  display: block;
  text-decoration: none;
  color: black;
  text-align: center;
  padding: 10px;
  background-color: white;
  transition: background-color .5s;
}
.aDropdown > .body > *:hover {
  background-color: rgb(225, 225, 225);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="aDropdown">
    <p class="title">DropDown</p>
    <div class="body">
      <a href="">Item</a>
      <a href="">Item</a>
      <a href="">Item</a>

    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

幻灯片下拉菜单打开

2 个答案: