JS Onclick函数无法正常工作

Question

Html:

<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program 1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis. </p>
<div class="btns"> <button class="btn btn1 showDiv3"> <img src="svg/dash.svg"> </button> <button class="btn btn2"> <span>Source code</span> <img src="svg/arrow.svg"> </button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close">
</div>
<div class="d-link-div3"> <span>Download</span> <a href="">Turbo C++ Code</a> <a href="">Dev C++ Code</a>
</div>
<div class="c-link-div3"> <span>Compiler</span> <a href="">Compile</a>
</div>
<div class="view-div3"> <span>View Code</span> <a href="">View Code</a>
</div>
</div>
</div>

当用户点击div.prog shrink时，类名变为div.prog expand

当用户点击img.collapse#collapse时，我想添加类收缩并删除类扩展

我试过了：

var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function(){
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}

输出语句显示在控制台上，但是div没有返回到其初始状态。

完整代码：

var progElements = document.getElementsByClassName('prog');
var closeBtn = document.getElementById('collapse');
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function() {
this.classList.add('expand');
this.classList.remove('shrink');
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains('shrink')) {
progElements[j].classList.add('shrink');
progElements[j].classList.remove('expand');
}
}
}
}
}
var showDiv3 = document.getElementsByClassName('showDiv3');
var div3 = document.getElementsByClassName('div3');
var div3Close = document.getElementsByClassName('div3-close');
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function() {
div3[i].style.display = 'block';
div3[i].style.zIndex = '100';
}
div3Close[i].onclick = function() {
div3[i].style.display = 'none';
}
}
var closeBtn = document.getElementById('collapse');
var prog = document.getElementById('prog');
closeBtn.onclick = function() {
console.log('close button clicked..');
prog.classList.remove('expand');
prog.classList.add('shrink');
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto+Condensed:wght@300;400;700&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap");
* {
outline: 0px solid #0f0;
font-family: "Poppins", sans-serif;
user-select: none;
}
.container {
position: relative;
transform: translateX(60px);
width: calc(100vw - 60px);
height: 100vh;
overflow: scroll;
background: #152644;
}
.container .title {
text-align: center;
width: 100%;
height: 66px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.container .title h1 {
color: #fff;
font-size: 35px;
font-weight: 700;
font-family: "Poppins", sans-serif;
background: var(--rainbow);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container .content {
position: relative;
height: calc(100% - 66px);
width: 100%;
overflow: scroll;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.home-content {
border: 0px solid #fff;
}
.home-content h1 {
color: #fff;
border: 0px solid #aaa;
}
.home-content .hc-links {
border: 0px solid #f0f;
}
.home-content .hc-links div {
border: 0px solid #0ff;
}
.home-content .hc-links div h1 {
border: 0px solid #faa;
}
.home-content .hc-links div a {
border: 0px solid #ff0;
}
.home-content .fback {
border: 0;
}
.content::-webkit-scrollbar {
display: none;
}
.content .prog.shrink {
margin: 16px;
width: 125px;
height: 125px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.content .prog.expand {
position: relative;
margin: 20px auto;
width: 75%;
background-color: #007bff;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prog.shrink .div1 {
height: 125px;
width: 125px;
background: #11101d;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .collapse {
display: none;
}
.prog.expand .div1 .collapse {
border: 1px solid #00f;
position: absolute;
top: 10px;
left: 10px;
height: 40px;
filter: invert(1);
background: #778;
border-radius: 5px;
}
.prog.shrink .div1 .progNum {
padding: 7px;
position: relative;
height: 75px;
width: 75px;
background: rgba(250, 250, 255, 0.45);
border-radius: 50%;
transform: translateY(-15px);
}
.prog.shrink .div1 .progNum::after {
content: var(--i);
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
color: #0088ff;
font-size: 15px;
font-weight: 500;
font-family: "Poppins", sans-serif;
opacity: 0.8;
}
.prog.expand .div1 .progNum {
background: #0088ff;
height: 125px;
width: 125px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.2);
}
.prog.shrink .div1 .progNum>div {
background: #11101d;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #def;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.shrink .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #0088ff;
font-weight: bold;
opacity: 0.8;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 52px;
}
.prog.shrink div2 {
display: none;
}
.prog.expand .div2 {
padding: 20px;
width: calc(100% - 250px);
}
.prog.expand .div2 h1 {
color: #fff;
font-size: 30px;
font-family: "Poppins", sans-serif;
}
.prog.expand .div2 p {
color: rgba(255, 255, 255, 0.8);
height: 100px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 17px;
}
.prog.expand .div2 .btns {
width: 100%;
display: flex;
}
.prog.expand .div2 .btns .btn {
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
background: #0bc42a;
border: none;
border-radius: 5px;
color: #fff;
}
.prog.expand .div2 .btns .btn1 {
padding: 10px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 20px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
}
.prog.expand .div2 .btns .btn img {
filter: invert(1);
}
.prog.expand .div3 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
background: #11101d;
}
.prog.expand .div3 .h-div3 {
margin-left: -10px;
margin-top: -10px;
width: calc(100% + 20px);
min-height: 50px;
background: #007bff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
.prog.expand .div3 .h-div3 h1 {
font-size: 30px;
color: #fff;
}
.prog.expand .div3 .h-div3 img {
filter: invert(1);
height: 30px;
}
.prog.expand .div3 .d-link-div3 {
margin-top: 20px;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: row;
padding: 15px 0;
}
.prog.expand .div3 .d-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .d-link-div3 a {
margin: 5px 5px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .c-link-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .c-link-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .c-link-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 20px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
.prog.expand .div3 .view-div3 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 0px;
min-height: 50px;
}
.prog.expand .div3 .view-div3 span {
background: #11101d;
padding: 0 5px;
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: rgba(250, 250, 255, 0.3);
}
.prog.expand .div3 .view-div3 a {
display: block;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
background: #007bff;
color: #fff;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
@media screen and (max-width: 700px) {
.home-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
min-width: 270px;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11101d;
border-radius: 8px;
box-shadow: 0 -5px 5px rgba(250, 250, 255, 0.05), inset 0 -5px 5px rgba(250, 250, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.home-content h1 {
margin-top: 15px;
font-size: 32px;
font-family: "Poppins", sans-serif;
}
.home-content .hc-links {
position: relative;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
border-radius: 8px;
}
.home-content .hc-links div {
padding: 12px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.home-content .hc-links div:nth-child(2) {
margin-bottom: 10px;
}
.home-content .hc-links div h1 {
font-size: 25px;
color: #def;
margin-bottom: 5px;
}
.home-content .hc-links div a {
white-space: nowrap;
text-decoration: none;
color: #fff;
background: #007bff;
font-size: 16px;
padding: 8px;
text-align: center;
border-radius: 5px;
}
.container .content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.content .prog.shrink {
margin: 6px;
margin-bottom: 12px;
}
.content .prog.expand {
position: relative;
top: 0;
left: 0;
transform: translate(0, 0);
width: 250px;
min-height: 370px;
border-radius: 10px;
overflow: hidden;
margin: 10px;
background: #11101d;
flex-direction: column;
}
.prog.expand .div1 {
position: relative;
top: 0px;
width: 100%;
height: 100px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #007bff;
}
.prog.expand .div1 .collapse {
height: 32px;
filter: invert(0);
opacity: 1;
position: absolute;
right: 10px;
}
.prog.expand .div1 .progNum {
position: absolute;
bottom: -37px;
left: 15px;
background: #11101d;
height: 75px;
width: 75px;
padding: 7px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div {
background: #eee;
border-radius: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.prog.expand .div1 .progNum>div>h1 {
font-size: 2.5em;
color: #000;
opacity: 0.6;
}
.prog.expand .div2 {
padding: 8px 16px;
display: block;
position: relative;
left: 0;
top: 0;
min-height: 270px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.prog.expand .div2 h1 {
transform: translateY(-10px);
align-self: flex-end;
margin-right: 0px;
font-size: 24px;
font-weight: 700;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
}
.prog.expand .div2 p {
transform: translateY(-10px);
margin-top: 10px;
margin-bottom: 0px;
font-size: 16.5px;
color: rgba(250, 250, 255, 0.8);
height: 160px;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
word-break: break-all;
}
.prog.expand .div2 .btns {
display: flex;
justify-content: flex-start;
}
.prog.expand .div2 .btns .btn {
border: none;
border-radius: 4px;
}
.prog.expand .div2 .btns .btn1 {
padding: 4px 5px;
}
.prog.expand .div2 .btns .btn1 img {
height: 28px;
}
.prog.expand .div2 .btns .btn2 {
margin-left: 10px;
padding: 5px 10px;
}
.prog.expand .div2 .btns .btn2 span {
font-size: 20px;
margin-right: 10px;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
.prog.expand .div2 .btns .btn2 img {
height: 25px;
}
.prog.expand .div3 .d-link-div3 {
flex-direction: column;
align-items: center;
}
.prog.expand .div3 .d-link-div3 a {
margin: 7px 0;
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>C++ programs</title>
<link rel="stylesheet" href="css/sideBar.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="main">
<!--< --sideBar-- >-->
<section class="sidebar close" id="sideBar">
<div class="logo-section close" id="logoSection">
<img src="svg/cpp.svg" id="btn1">
<h1>C++<span>programs</span></h1>
<img src="svg/bar.svg" id="btn2" class="close">
</div>
<ul class="nav-list close" id="navList">
<li>
<a href="11th.html" class="navLinks">
<img src="svg/1.svg" class="navImg">
<span class="navItem">
11th class
</span>
</a>
<span class="tooltip">
11th class
</span>
</li>
<li>
<a href="12th.html" class="navLinks">
<img src="svg/2.svg" class="navImg">
<span class="navItem">
12th class
</span>
</a>
<span class="tooltip">
12th class
</span>
</li>
<li>
<a href="others.html" class="navLinks">
<img src="svg/3.svg" class="navImg">
<span class="navItem">
Others
</span>
</a>
<span class="tooltip">
Others
</span>
</li>
<li>
<a href="feedback.html" class="navLinks">
<img src="svg/4.svg" class="navImg">
<span class="navItem">
Feedback
</span>
</a>
<span class="tooltip">
Feedback
</span>
</li>
<li>
<a href="more.html" class="navLinks">
<img src="svg/5.svg" class="navImg">
<span class="navItem">
More
</span>
</a>
<span class="tooltip">
More
</span>
</li>
<li>
<a href="FAQ.html" class="navLinks">
<img src="svg/6.svg" class="navImg">
<span class="navItem">
FAQ
</span>
</a>
<span class="tooltip">
FAQ
</span>
</li>
<li class="theme">
<a id="theme">
<span>
Darkmode
</span>
<img src="svg/sun.svg" id="ThemeImg">
</a>
</li>
</ul>
</section>





<!--< --content-section-- >-->
<section class="container">
<div class="title">
<h1>C++ programs</h1>
</div>
<div class="content 11th">
<!--program 1-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse" id="collapse">
<div class="progNum" style="--i: 'Program&nbsp;1'">
<div>
<h1>1</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 01:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1 showDiv3">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
<div class="div3">
<div class="h-div3">
<h1>C++</h1>
<img src="svg/close.svg" class="div3-close" />
</div>
<div class="d-link-div3">
<span>Download</span>
<a href="">Turbo C++ Code</a>
<a href="">Dev C++ Code</a>
</div>
<div class="c-link-div3">
<span>Compiler</span>
<a href="">Compile</a>
</div>
<div class="view-div3">
<span>View Code</span>
<a href="">View Code</a>

</div>
</div>
</div>
<!--program 2-->
<div class="prog shrink" id="prog">
<div class="div1">
<img src="svg/close.svg" class="collapse">
<div class="progNum" style="--i: 'Program&nbsp;2'">
<div>
<h1>2</h1>
</div>
</div>
</div>
<div class="div2">
<h1>Program 02:</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ipsum in elit congue blandit. Nullam vitae lobortis lorem, sagittis convallis felis. Praesent tincidunt tristique. Nullam vitae lobortis lorem, sagittis convallis felis.
</p>
<div class="btns">
<button class="btn btn1">
<img src="svg/dash.svg">
</button>
<button class="btn btn2">
<span>Source code</span>
<img src="svg/arrow.svg">
</button>
</div>
</div>
</div>

</div>
</section>
</section>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
<script>
links[0].classList.add('active');
</script>
</body>
</html>

我想通过将div的类从prog expand更改为prog shrink来关闭div

有人能告诉我怎样才能做到这一点吗。。。

Full project :链路

Answer 1

1. 首先需要有一个唯一的id，例如id="prog-one"id="prog-two"
2. 其次，您需要设置datatarget属性，这样您就可以针对特定的div来切换(添加/删除)类。<img src="svg/close.svg" class="collapse" data-target="prog-two" id="collapse">
3. 最后，您必须获得所有的塌陷图像并添加事件侦听器

var closeBtns = document.querySelectorAll('.collapse');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', function({target}) {
const targetId = target.getAttribute('data-target');
const targetDOM = document.getElementById(targetId);
console.log('close button clicked..');
targetDOM.classList.remove('expand');
targetDOM.classList.add('shrink');
})
})

这是代码笔链接。链接一链接二

[更新]

var progElements = document.getElementsByClassName("prog");
var closeBtn = document.getElementById("collapse");
for (let i = 0; i < progElements.length; i++) {
progElements[i].onclick = function ({ target }) {
if (target.getAttribute("class") === "collapse") return;
this.classList.add("expand");
this.classList.remove("shrink");
console.log("running");
for (let j = 0; j < progElements.length; j++) {
if (i !== j) {
if (!progElements[j].classList.contains("shrink")) {
progElements[j].classList.add("shrink");
progElements[j].classList.remove("expand");
}
}
}
};
}
var showDiv3 = document.getElementsByClassName("showDiv3");
var div3 = document.getElementsByClassName("div3");
var div3Close = document.getElementsByClassName("div3-close");
for (let i = 0; i < div3.length; i++) {
showDiv3[i].onclick = function () {
div3[i].style.display = "block";
div3[i].style.zIndex = "100";
};
div3Close[i].onclick = function () {
div3[i].style.display = "none";
};
}
var closeBtns = document.querySelectorAll(".collapse");
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", function ({ target }) {
const targetId = target.getAttribute("data-target");
const targetDOM = document.getElementById(targetId);
console.log("close button clicked..");
targetDOM.className = "prog shrink";
});
});