代码之家 › 专栏 › 技术社区 › Elias

滑动下拉打开

css html

Elias · 技术社区 · 7 年前

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

我试图创建一个没有任何javascript的幻灯片打开下拉列表。我在谷歌上搜索了一下,但找不到任何解决方案 height ,使用固定的 max-height 或者…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>

可以创建这个吗?

2 回复 | 直到 7 年前

Itay Gal 7 年前

使用 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>

Elias 7 年前

所以我想出了一个解决办法具有 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>