请老师检查代码
来源：7-3 自由编程
ddxz
2022-07-17 19:51:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
background-color: gainsboro;
width: 100%;
height: 50px;
}
li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
div {
width: 100px;
height: 200px;
background-color: gray;
display: none;
}
img {
/* display: none; */
margin-top: 100px;
}
</style>
</head>
<body>
<ul id="ul">
</ul>
<script type="module">
import { getJSON } from './index.js';
const ul = document.getElementById('ul');
let html = '';
const url = 'https://www.imooc.com/api/mall-PC/index/menu';
getJSON(url).then((response) => {
for (const item of response.data) {
html += `<li class="menu-item" data-key="${item.key}"><span>${item.title}</span><p><div><img src="./loading.gif" alt=""></div></li>`;
}
ul.innerHTML = html;
}).then(() => {
const lis = document.getElementsByClassName('menu-item');
const imgs = document.querySelectorAll('img');
for (const item of lis) {
item.addEventListener('mouseenter', () => {
item.style.backgroundColor = 'gray';
item.querySelector('div').style.display = 'block';
const url2 = `${url}/${item.dataset.key}`;
let html = '';
if (item.dataset.done !== 'done') {
item.dataset.done = 'done';
getJSON(url2).then((response) => {
for (const item of response.data) {
html += `${item.title}`
};
item.querySelector('div').innerHTML = html
}).catch((err) => {
console.log(err)
})
}
})
item.addEventListener('mouseleave', () => {
item.style.backgroundColor = 'gainsboro';
item.querySelector('div').style.display = 'none';
})
}
}).catch((err) => {
console.log(err)
});
</script>
</body>
</html>
1回答
-
imooc_慕慕
2022-07-18
同学你好，该效果的整体思路是没有问题的，可以优化的地方参考如下：
1、导航居中显示；
2、li标签不给宽度，由内容撑开；鼠标变成小手的形状；
一般这种效果需要设置相对定位绝对定位，
3、给下拉列表背景设置个透明度，效果更分明；设置绝对定位；
4、我们可以手动加个定时器做个延迟效果；
4、标签书写错乱
祝学习愉快~
0
相似问题