<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap p{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bolder;
background-color: #cc3366;
user-select: none;
}
#wrap ul{
overflow: hidden;
height: 0;
transition: height .3s;
}
#wrap ul.on{
overflow: hidden;
height: 103px;
}
#wrap ul li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bolder;
background-color: #f4e5a9;
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<div id="wrap">
<p>衣服</p>
<ul>
<li>上衣</li>
<li>裙子</li>
<li>鞋子</li>
</ul>
</div>
<script>
let oP = document.querySelector("#wrap p");
let oUl = document.querySelector("#wrap ul");
oP.onclick = function (ev) {
oUl.classList.add("on");
// 阻止事件冒泡 事件到此为止 不会再往上一层传递
ev.stopPropagation()
};
document.onclick = function () {
oUl.classList.remove("on");
}
</script>
</body>
</html>
Python3Turtle