如何使用基本的javascript代码来平滑打开下拉列表

Question

如何使红色背景接地"内容"；当点击"打开"时，区域从上到下平滑打开；点击器"；用这段代码？另外一个问题是，如何用相同的javascript代码在同一个Html中添加更多的Clicker？如果我复制这些，只有一个在工作。

function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

.accordion {
position: relative;
width: 100%;
height: auto;
background:red;
}.grider{
display: block;
width: 100%;
background: #fff;
}
#myLinks {
display:none;
}
.content {
height:50px;}

<div class="accordion">
<a href="javascript:void(0);" onclick="myFunction()" class="grider clearfix toggle">    
<span>Clicker</span>
</a>

<div class="content clearfix" id="myLinks">Content</div>
</div>

Answer 1

您不需要所有动画都使用Javascript。你为什么不试试CSS呢？

const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.target.classList.toggle('open')
})
})

html,
body {
margin: 0;
font-family: Arial;
}
nav {
display: flex;
}
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 0.25s;
}
.btn-dropdown.open>.dropdown-content-container {
max-height: 120px;
transition: all 0.4s;
}

<nav>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 1
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 1
</div>
</div>
</div>
</div>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 2
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 2.1<br /> DROPDOWN CONTENT 2.2<br /> DROPDOWN CONTENT 2.3<br /> DROPDOWN CONTENT 2.4<br />
</div>
</div>
</div>
</div>
</nav>