html代码
<section>
<main>
<div>
<span>+</span>
星期一
</div>
</main>
<main>
<div>
<span>+</span>
星期二
</div>
</main>
<main>
<div>
<span>+</span>
星期三
</div>
</main>
<main>
<div>
<span>+</span>
星期四
</div>
</main>
<main>
<div>
<span>+</span>
星期五
</div>
</main>
</section>```
CSS代码
```html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
width: 400px;
height: 500px;
margin: 0 auto;
}
section main {
border: 1px solid #bdbdbd;
border-bottom: 1px solid white;
}
section div {
width: 100%;
height: 60px;
background-color: #bdbdbd;
/* display: flex; */
line-height: 60px;
text-align: center;
position: relative;
}
div span {
position: absolute;
top: 0;
left: 0;
background-color: #e1e1e1;
color: white;
font-weight: 900;
line-height: 30px;
font-size: 40px;
width: 30px;
}
ul {
width: 100%;
height: 200px;
padding: 10px;
list-style: none;
text-align: center;
}
li {
background-color: #eaeaeb;
margin-bottom: 10px;
height: 40px;
line-height: 40px;
font-size: 30px;
}```
JS代码
```html
function $(item) {
return document.querySelector(item)
}
function $$(item) {
return document.querySelectorAll(item)
}
var oDiv = $$('div')
var oUl=document.createElement('ul')
var str=['语文','数学','英语','科学']
var oMain=document.querySelectorAll('main')
for (let j = 0; j < str.length; j++) {
var oLi=document.createElement('li')
oLi.innerHTML='<a href="#">'+str[j]+'</a>'
oUl.appendChild(oLi)
}
for (let i = 0; i < oDiv.length; i++) {
oDiv[i].addEventListener('mouseover',fn)
oDiv[i].οnmοuseleave=function(){
this.firstElementChild.innerText='+'
// console.log(this.parentNode.lastElementChild);
this.parentNode.lastElementChild.remove()
}
}
function fn() {
this.parentNode.appendChild(oUl)
this.firstElementChild.innerText='-'
}