如何在没有Jquery的情况下在CSS Flexbox中创建可点击的动画下拉列表？

问：

我有几个一个接一个的锚标签，你可以看到，当我点击其中一个时，一个div会出现在它下面，如下所示：

HTML、CSS 和 JS 代码：

[HTML全文]

我刚刚得到了第一个锚标签，其他的都是一样的。

       <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;
    
 }

通过单击ID为“itemOne”的锚标记，将此“.active”类添加到“.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";
}

但它没有成功。

任何帮助将不胜感激。提前致谢。