小贝子编程

使用js隐藏multipal元素，但只有第一个元素工作正常



我的盒子1工作正常，但第二个&单击时第三个框工作不正常我不手动更改id，您可以使用js进行更改。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

function avmyFunction() {
var x = document.getElementById("av-h");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
padding: 0;
margin: 0;
scrollbar-width: none;
}
.av-box {
width: 100%;
}
.av-ubox {
display: flex;
width: 80%;
margin: 2.5px auto;
}
.av-fbox {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
margin: 5px;
justify-content: center;
}
.av-hboxl {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
left: 0px;
margin: 5px;
}.av-hboxr {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
right: 0px;
margin: 5px;
}
img {
width: 100%;
}
.av-btn {
position: absolute;
width: 50px;
bottom: 10px;
right: 10px;
height: 50px;
border-radius: 25px;
border-style: none;
content: "274C";
}
#av-icona {
display: none;
}
@media only screen and (min-width: 600px) {
.av-ubox {
max-width: 1439px;
}
}
.av-title {
position: absolute;
text-align: center;
}
.av-title-h {
position: absolute;
text-align: center;
width: 100%;
padding: 0 20%;
height: 100%;
background-color: #e9b9b9;
}
.av-title-h p {
padding-top: 10px;
font-size: 24px;
top: center;

}
@media only screen and (max-width: 600px) {
.av-hboxl {
width: 100%;
}
.av-hboxr {
width: 100%;
}
.av-ubox {
display: block;
width: 98%;
margin: 1% 0%;
}
.av-title-h {
width: 100%;
padding: 0 8%;
height: 100%;
}
.av-title- {
width: 90%
}
.av-title-h p {
font-size: 20px;
padding-top: 10px;
}
.av-span {
display: block;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="ID.js"></script>
</head>
<body>
<div class="av-box">
<div class="av-ubox">
<div class="av-fbox">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
<a href=""><p>Learn more about the Move to iOS app</p></a>
</div>
<button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
<div class="av-ubox">
<div class="av-hboxl">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href=""><P>Learn more about the Move to iOS app</P></a>
</div>
<button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
<div class="av-hboxr">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href=""><P>Learn more about the Move to iOS app</P></a>
</div>
<button class="av-btn" onclick="avmyFunction()"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
</div>
</body>

对不同的元素使用相同的id是反模式/错误的。只需给它们不同的id，然后将它们传递给avmyFunction。

function avmyFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
padding: 0;
margin: 0;
scrollbar-width: none;
}
.av-box {
width: 100%;
}
.av-ubox {
display: flex;
width: 80%;
margin: 2.5px auto;
}
.av-fbox {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
margin: 5px;
justify-content: center;
}
.av-hboxl {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
left: 0px;
margin: 5px;
}
.av-hboxr {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
right: 0px;
margin: 5px;
}
img {
width: 100%;
}
.av-btn {
position: absolute;
width: 50px;
bottom: 10px;
right: 10px;
height: 50px;
border-radius: 25px;
border-style: none;
content: "274C";
}
#av-icona {
display: none;
}
@media only screen and (min-width: 600px) {
.av-ubox {
max-width: 1439px;
}
}
.av-title {
position: absolute;
text-align: center;
}
.av-title-h {
position: absolute;
text-align: center;
width: 100%;
padding: 0 20%;
height: 100%;
background-color: #e9b9b9;
}
.av-title-h p {
padding-top: 10px;
font-size: 24px;
top: center;
}
@media only screen and (max-width: 600px) {
.av-hboxl {
width: 100%;
}
.av-hboxr {
width: 100%;
}
.av-ubox {
display: block;
width: 98%;
margin: 1% 0%;
}
.av-title-h {
width: 100%;
padding: 0 8%;
height: 100%;
}
.av-title- {
width: 90%
}
.av-title-h p {
font-size: 20px;
padding-top: 10px;
}
.av-span {
display: block;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="ID.js"></script>
<title>casemurk</title>
</head>
<body>
<div class="av-box">
<div class="av-ubox">
<div class="av-fbox">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h1">
<h3>Move to iOS app</h3>
<p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
<a href="">
<p>Learn more about the Move to iOS app</p>
</a>
</div>
<button class="av-btn" onclick="avmyFunction('av-h1')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
<div class="av-ubox">
<div class="av-hboxl">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h2">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href="">
<P>Learn more about the Move to iOS app</P>
</a>
</div>
<button class="av-btn" onclick="avmyFunction('av-h2')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
<div class="av-hboxr">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h3">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href="">
<P>Learn more about the Move to iOS app</P>
</a>
</div>
<button class="av-btn" onclick="avmyFunction('av-h3')"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
</div>
</body>

谢谢Erenn，但我不喜欢这个

var acc = document.getElementsByClassName("av-btn");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.previousElementSibling;
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
});
}
* {
padding: 0;
margin: 0;
scrollbar-width: none;
}
.av-box {
width: 100%;
}
.av-ubox {
display: flex;
width: 80%;
margin: 2.5px auto;
}
.av-fbox {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
margin: 5px;
justify-content: center;
}
.av-hboxl {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
left: 0px;
margin: 5px;
}.av-hboxr {
display: flex;
border-radius: 25px;
position: relative;
overflow: hidden;
width: 50%;
right: 0px;
margin: 5px;
}
img {
width: 100%;
}
.av-btn {
position: absolute;
width: 50px;
bottom: 10px;
right: 10px;
height: 50px;
border-radius: 25px;
border-style: none;
content: "274C";
}
#av-icona {
display: none;
}
@media only screen and (min-width: 600px) {
.av-ubox {
max-width: 1439px;
}
}
.av-title {
position: absolute;
text-align: center;
}
.av-title-h {
position: absolute;
text-align: center;
width: 100%;
padding: 0 20%;
height: 100%;
background-color: #e9b9b9;
}
.av-title-h p {
padding-top: 10px;
font-size: 24px;
top: center;

}
@media only screen and (max-width: 600px) {
.av-hboxl {
width: 100%;
}
.av-hboxr {
width: 100%;
}
.av-ubox {
display: block;
width: 98%;
margin: 1% 0%;
}
.av-title-h {
width: 100%;
padding: 0 8%;
height: 100%;
}
.av-title- {
width: 90%
}
.av-title-h p {
font-size: 20px;
padding-top: 10px;
}
.av-span {
display: block;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="av-box">
<div class="av-ubox">
<div class="av-fbox">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<p>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</p>
<a href=""><p>Learn more about the Move to iOS app</p></a>
</div>
<button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
<div class="av-ubox">
<div class="av-hboxl">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href=""><P>Learn more about the Move to iOS app</P></a>
</div>
<button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
<div class="av-hboxr">
<img src="https://images.unsplash.com/photo-1476958526483-36efcaa80b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q" alt="">
<div class="av-title">
<h3>Move to iOS app</h3>
<h2><span class="av-span">Transfer your photos and</span><span class="av-span">Transfer your photos and</span></h2>
</div>
<div class="av-title-h" id="av-h">
<h3>Move to iOS app</h3>
<P>Start by downloading the Move to iOS app on your Android phone. It securely transfers the stuff you care about most — your contacts, messages, photos, videos, email accounts and calendars — from your Android phone to your iPhone.</P>
<a href=""><P>Learn more about the Move to iOS app</P></a>
</div>
<button class="av-btn"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>
</div>
</div>
</div>
</body>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium