如何在沒有 Jquery 的情況下在 CSS Flexbox 中創建可點擊的動畫下拉菜單？

Question

我有幾個一個接一個的錨標記，當我單擊其中一個時，您會看到一個 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";
}

但沒有成功。

任何幫助，將不勝感激。 提前致謝。

Answer 1

您使用最大高度屬性而不是高度。 將子類別的溢出設置為隱藏。 然后將其初始最大高度設置為 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;
}

看看我在這里做了什么

Answer 2

您可以為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>