                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /展开与收起效果

瞎写的，没看完教程，应该是另外一种思路

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>折叠效果2</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#wrap {
width: 800px;
margin: 0 auto;
}
#ad {
width: 100%;
height: 0px;
overflow: hidden;
transition: height 5s;
}
#ad img {
width: 100%;
}
#banner {
width: 100%;
height: 100px;
background-color: #69c;
line-height: 100px;
text-align: center;
}
#banner a {
text-decoration: none;
}

</style>
</head>
<body>
<div id="wrap">
<div id="ad"></div>
<div id="banner">
<a href="#">点击展开</a>
</div>
</div>

<script>
window.onload = function() {
let adBox  = document.querySelector('#ad');
let banner = document.querySelector('#banner');

let img = new Image();
img.src = "src/lili.jpg";
imgEl = `<img src="${img.src}"/>`;

img.onload = function() {
adBox.innerHTML = imgEl;
}

banner.addEventListener('mouseover', function(){
adBox.style.height = '480px';
});
banner.onmouseout = function(){
adBox.style.height = '0px';
};

}
</script>
</body>
</html>