js实现手风琴折叠下拉菜单效果代码-html代码-BFW代码库

js实现手风琴折叠下拉菜单效果代码

代码语言：html

代码描述：js实现手风琴折叠下拉菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  align-items: center;
  background-color: #d6d9dd;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}
.card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 1.2px 2.2px rgba(0, 0, 0, 0.039),
    0px 2.8px 5.3px rgba(0, 0, 0, 0.046), 0px 5.1px 10px rgba(0, 0, 0, 0.049),
    0px 9.9px 17.9px rgba(0, 0, 0, 0.051),
    0px 21.9px 33.4px rgba(0, 0, 0, 0.055), 0px 50px 80px rgba(0, 0, 0, 0.06);
  padding: 20px 0;
}
.name {
  font-family: sans-serif;
  margin-top: 12px;
}
.row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  height: 30px;
  height: 40px;
  justify-content: space-between;
  padding: 0 20px;
  transition: height 400ms;
  width: 200px;
}
.row.active {
  height: 120px;
}
.button {
  margin-right: 10px;
  width: 52px;
}
.icon {
  fill: none;
  margin-top: 12px;
  stroke: #000;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
</style>



  
  
</head>

<body>
  <div class="card"></div>

  
      <script >
function createNode(name, values) {
  function handleClick() {
    animate.animationToggle = !animate.animationToggle;
    if (!animate.animationToggle) {
      row.classList.remove("active");
    } else {
      row.classList.add("active");
    }
    animate.setAttribute(
    "values",
    animate.animationToggle ?
    values.join("; ") :
    values.slice().reverse().join("; "));

    animate.beginElement();
  }

  const card = document.querySelector(".card");

  const row = document.createElement("div");
  row.onclick = handleClick;
  row.className = "row";

  const nameElement = document.createElement("div");
  nameElement.className = "name";
  nameElement.textContent = name;
  row.appendChild(nameElement);

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "16");
  svg.setAttribute("height", "16");
  svg.setAttribute("viewBox", "0 0 100 100");
  svg.setAttribute("class", "icon");

  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute(
  "d",
  "M 20,35 C 20,35 36.93934,51.93934 50,65 61.702962,53.297038 80,35 80,35");

  path.setAttribute("class", "arrow");

  const animate = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "animate");

  animate.setAttribute("attributeNa.........完整代码请登录后点击上方下载按钮下载查看