<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.box {
width: 100%;
height: 100%;
border: 1px solid red;
display: flex;
}
.item {
flex: 1;
}
.left {
border: 1px solid blue;
position: relative;
transition: flex 0.5s;
button {
cursor: pointer;
position: absolute;
top: 50%;
right: -10px;
}
}
.center {
border: 1px solid green;
}
.right {
border: 1px solid yellow;
}
.flex0 {
flex: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left item">
<button class="small">></button>
<button class="big"><</button>
</div>
<div class="center item"></div>
<div class="right item"></div>
</div>
<script>
const big = document.querySelector(".big");
const small = document.querySelector(".small");
const left = document.querySelector(".left");
const str = "flex0";
let flag = false;
function isFlag() {
if (flag) {
big.style.display = "none";
small.style.display = "block";
} else {
big.style.display = "block";
small.style.display = "none";
}
}
isFlag();
big.onclick = () => {
left.classList.add(str);
flag = true;
isFlag();
};
small.onclick = () => {
left.classList.remove(str);
flag = false;
isFlag();
};
</script>
</body>
</html>
html原生展开收缩
最新推荐文章于 2024-07-18 16:22:57 发布