7-25：HTML学习#16-CSDN博客

本文链接：https://blog.csdn.net/weixin_70738298/article/details/125985606

本文介绍了如何使用JavaScript实现点击元素后延迟隐藏，以及鼠标悬停时显示和离开时延时隐藏的效果。通过添加事件监听器和setTimeout函数，控制游戏类型列表的显示与隐藏状态，为用户交互增加动态体验。

摘要由CSDN通过智能技术生成

今日学习：JS延时执行，点击执行和移动执行。学习时长：3h。

 <div id="clickOpen">
        点击展开
    </div>
        <br>
        <ul class="list">
            <li class="item">RPG</li>
            <li class="item">ACT</li>
            <li class="item">FPS</li>
            <li class="item">TPS</li>
            <li class="item">MOBA</li>
        </ul>






let clickBtn=document.getElementById("clickOpen");
let list=document.getElementsByClassName("list")[0];
 
let isOpen=false;

clickBtn.addEventListener("click",function(){
    isOpen=!isOpen;
    if(isOpen){
        clickBtn.innerHTML='点击隐藏';
        list.style.display='inline-block';
    }
    else{
        clickBtn.innerHTML='点击展开';
        list.style.display='none';
    }
})
let t=function(){
    setTimeout(() => {
      list.style.display='none';
    }, 5000);
}
clickBtn.onmouseenter=function(){
    list.style.display='inline-block';
}
clickBtn.onmouseleave=function(){
    t();
    console.log("111");
}
list.onmouseenter=function(){
    list.style.display='inline-block';
}




#clickOpen{
    background-color: aquamarine;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 5px 5px rgb(0,0,0,0.2);
}
.list{
    list-style: none;
    padding-left:0px;
    background-color: bisque;
    display: none;
}
.item{
    cursor: pointer;
}