[英]How to create a clickable animated dropdown in CSS Flexbox without Jquery?
I have several one-after-another anchor tags as you can see when I click one of them a div appears below it like that:我有几个一个接一个的锚标记,当我单击其中一个时,您会看到一个 div 出现在它下面,如下所示:
HTML, CSS AND JS Codes: HTML、CSS 和 JS 代码:
HTML HTML
I just got the first anchor tag the other ones go the same.我刚得到第一个锚标记,其他的 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 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;
}
This ".active" class is added next to the ".subCategory" by clicking the anchor tag whose ID is "itemOne".这个“.active”class通过点击ID为“itemOne”的锚标签添加到“.subCategory”旁边。 So the div becomes seeable.
所以 div 变得可见。
.active {
display:flex
}
JS JS
let itemOne = document.getElementById('itemOne');
let subListOne = document.getElementById('subListOne');
itemOne.addEventListener('click', () => {
subListOne.classList.toggle('active');
})
What I want to do is animate this event.我想要做的是为这个事件制作动画。 I wanted to make the div slide down in some milliseconds.
我想让 div 在几毫秒内向下滑动。 By the way, While I'm doing this I wanted to protect this div's display as a flex.
顺便说一句,当我这样做时,我想保护这个 div 的显示作为一个 flex。
First I tried to do this with height property so instead of首先,我尝试使用 height 属性来执行此操作,而不是
.subCategory {
flex-direction: column;
background-color: darkslategrey;
display: none;
}
I did that:我这样做了:
.subCategory {
flex-direction: column;
background-color: darkslategrey;
display: flex;
height:0px;
transition: all 0.7s ease
}
and ".active" is:而“.active”是:
.active {
height:"auto";
}
But it didn't work out.但没有成功。
Any help would be appreciated.任何帮助,将不胜感激。 Thanks in Advance.
提前致谢。
You use the max-height property instead of height.您使用最大高度属性而不是高度。 Set the overflow of subCategory to hidden.
将子类别的溢出设置为隐藏。 Then set its initial max-height to 0.
然后将其初始最大高度设置为 0。
Then upon hover or focus, you make the max-height a large and impossible number like 9999px for example.然后在 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;
}
You can animate the max-height
property您可以为
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.