12.面板问题

面板问题

html部分

Lorem ipsum dolor sit, amet consectetur adipisicing.


    

        

            
Lorem, ipsum dolor.
            

                
            
        
        

            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis et.
            Laudantium cum, atque incidunt expedita sequi doloribus nulla voluptatum eos labore!
        
    
    

        

            
Lorem, ipsum dolor.
            

                
            
        
        

            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis et.
            Laudantium cum, atque incidunt expedita sequi doloribus nulla voluptatum eos labore!
        

    
    

        

            
Lorem, ipsum dolor.
            

                
            
        
        

            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, blanditiis et.
            Laudantium cum, atque incidunt expedita sequi doloribus nulla voluptatum eos labore!
        
    

css部分

*{
    margin: 0;
    padding: 0;
}


body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.container{
    max-width: 600px;
}
.faq{
    background-color: transparent;
    border: 1px solid #9fa4a8;
    border-radius: 10x;
    margin: 20px 0;
    padding: 30px;
    overflow: hidden;
    transform:  0.3s ;
    max-height: 10px;
    transition: all .3s;
}
.faq.active{
    background-color: #fff;
    box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.1),
                10px 0 10px 5px rgba(0, 0, 0, 0.1);
    max-height: 200px;
}

.faq.active .handle{
    transform: rotate(180deg);
}
.content{
    padding: 20px;
}

.title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.handle{
    transition: all .3s;
    cursor: pointer;
}

js部分

// 获取dom对象
const btn=document.querySelectorAll(".handle")

// 点击事件给faq对象添加或移除active类
btn.forEach((item)=>{
    item.addEventListener("click",function(){
    
        item.parentNode.parentNode.classList.toggle("active")
    })
})

效果