[英]How to create a clickable animated dropdown in CSS Flexbox without Jquery?
我有几个一个接一个的锚标记,当我单击其中一个时,您会看到一个 div 出现在它下面,如下所示:
HTML、CSS 和 JS 代码:
HTML
我刚得到第一个锚标记,其他的 go 相同。
<div class="category2">
<a href="#" class="items2" id="itemOne">
Elektrikli El Aletleri
</a>
<div class="subCategory" id="subListOne">
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
</div>
...
</div>
CSS
.category2 {
flex-direction: column;
display:none;
}
@media screen and (max-width:1220px) {
.category2 {
display: flex;
}
.category2 > a {
height: 50px;
}
}
.items2 {
border:1px solid white;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
font-size:20px;
}
.subCategory {
flex-direction: column;
background-color: darkslategrey;
display: none;
}
这个“.active”class通过点击ID为“itemOne”的锚标签添加到“.subCategory”旁边。 所以 div 变得可见。
.active {
display:flex
}
JS
let itemOne = document.getElementById('itemOne');
let subListOne = document.getElementById('subListOne');
itemOne.addEventListener('click', () => {
subListOne.classList.toggle('active');
})
我想要做的是为这个事件制作动画。 我想让 div 在几毫秒内向下滑动。 顺便说一句,当我这样做时,我想保护这个 div 的显示作为一个 flex。
首先,我尝试使用 height 属性来执行此操作,而不是
.subCategory {
flex-direction: column;
background-color: darkslategrey;
display: none;
}
我这样做了:
.subCategory {
flex-direction: column;
background-color: darkslategrey;
display: flex;
height:0px;
transition: all 0.7s ease
}
而“.active”是:
.active {
height:"auto";
}
但没有成功。
任何帮助,将不胜感激。 提前致谢。
您使用最大高度属性而不是高度。 将子类别的溢出设置为隐藏。 然后将其初始最大高度设置为 0。
然后在 hover 或 focus 上,将最大高度设置为一个很大且不可能的数字,例如 9999px。
<div class="category2" tabindex="1">
<a href="#" class="items2" id="itemOne">
Elektrikli El Aletleri
</a>
<div class="subCategory" id="subListOne">
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
<a href="#">Lorem ipsum dolor sit.</a>
</div>
</div>
.category2 {
flex-direction: column;
display: flex;
}
@media screen and (max-width:1220px) {
.category2 {
display: flex;
}
.category2 > a {
height: 50px;
}
}
.items2 {
border:1px solid white;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
font-size:20px;
}
.subCategory {
flex-direction: column;
background-color: darkslategrey;
transition: .5s ease-in-out;
max-height: 0;
overflow: hidden;
}
.category2:hover .subCategory{
max-height: 999px;
}
看看我在这里做了什么
您可以为max-height
属性设置动画
let itemOne = document.getElementById('itemOne'); let subListOne = document.getElementById('subListOne'); itemOne.addEventListener('click', () => { subListOne.classList.toggle('active'); })
.category2 { display: flex; flex-direction: column; }.category2>a { height: 50px; }.items2 { border: 1px solid white; background-color: black; color: white; display: flex; justify-content: center; align-items: center; border-radius: 20px; font-size: 20px; }.subCategory { flex-direction: column; background-color: darkslategrey; display: flex; max-height: 0px; overflow: hidden; transition: max-height 0.7s ease }.subCategory > a { color: white; text-decoration: none; }.active { max-height: 400px; }
<div class="category2"> <a href="#" class="items2" id="itemOne">Elektrikli El Aletleri</a> <div class="subCategory" id="subListOne"> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.