我只想让按钮出现在网页加载中，然后在单击时显示以下div。我尝试了其他人推荐的其他解决方案，并且每当我使用display时：在.ytvid上，单击该按钮将不再显示。我认为通过让jQuery说单击按钮时，它会以块显示方式起作用。，我被困住了。帮助将不胜感激。
我根本不擅长jQuery。我试图研究这个问题，但在理解人们的答案时迷失了方向。我试过显示：无；并更改jQuery，但它似乎坏了。
<title>Danielle Pritchett</title>
<link rel="stylesheet" href="https://use.typekit.net/yjb0hcj.css">
<style>
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
background-color: #fff;
color: #444;
position:relative;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
height: 100vh;
position:relative;
}
.a {
grid-column: 1 / span 5;
background-color:white;
text-align: center;
background-image: linear-gradient(to right, pink , lightpink);
position:relative;
}
.b {
grid-column: 1/ span 5;
height:20vh;
background-color: #e6175b;
}
.c {
grid-column: span 1;
height:10vh;
background-color: #e6175b;
text-align:center;
}
.d {
grid-column: span 1;
height:10vh;
background-color: #e6175b;
text-align:center;
}
.e {
grid-column: span 1;
height:10vh;
background-color: #e6175b;grid-column: span 1;
text-align:center;
}
.f {
grid-column: span 1;
height:10vh;
background-color: #e6175b;grid-column: span 1;
text-align:center;
}
.g {
grid-column: span 1;
height:10vh;
background-color: #e6175b;
text-align:center;
}
h1{
font-family: antarctican-headline, sans-serif;
font-weight: 300;
font-style: normal;
color: black;
font-size: 10vmin;
margin: 0;
padding: 0;
line-height: 100vh;
}
h2{
font-family: antarctican-headline, sans-serif;
font-weight: 400;
font-style: normal;
color: white;
font-size: 3vmin;
margin: 0;
padding: 0;
line-height: 20vh;
letter-spacing: 1px;
}
.dot {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
padding: 0;
margin:0;
line-height:10vh;
position:relative;
}
#myDIV {
grid-column: span 5;
background-color: lightpink;
}
#video{
grid-column: span 5;
}
.ytvid{
display:none;
}
.button {
background-color: white;
border: none;
padding: 16px 32px;
text-align: center;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
font-family: antarctican-headline, sans-serif;
font-weight: 400;
font-style: normal;
color: #e6175b;
font-size: 3vmin;
margin: 0;
padding: 0;
line-height: 10vh;
letter-spacing: 1px;
}
.button:hover {
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a"><h1>
<span style='color: #e6175b'>C</span>
<span style='color: #be1e68'>H</span>
<span style='color: #9e226e'>R</span>
<span style='color: #8f2575'>O</span>
<span style='color: #522e87'>M</span>
<span style='color: #32358f'>E</span>
<span style='color: #32358f'>S</span>
<span style='color: #32358f'>T</span>
<span style='color: #522e87'>H</span>
<span style='color: #8f2575'>E</span>
<span style='color: #9e226e'>S</span>
<span style='color: #be1e68'>I</span>
<span style='color: #e6175b'>A</span>
</h1></div>
<div class="box b"><h2>: type of synesthesia in which color is perceived in response to stimuli that contain no element of color.</h2></div>
<div class="box c"> <span class="dot"></span></div>
<div class="box d"><span class="dot"></span></div>
<div class="box e"><span class="dot"></span></div>
<div class="box f"><span class="dot"></span></div>
<div class="box g"><span class="dot"></span></div>
<button class="button" id="video"onclick="myFunction()">click me</button>
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
我希望在加载网页时，.ytvid div将被隐藏，直到单击按钮为止。
这是针对这种情况的基本设置，不jQuery包括在内：
function toggleDisplay() {
const ytvid = document.querySelector('.ytvid');
ytvid.style.display = ytvid.style.display === 'block' ? 'none' : 'block';
}.ytvid {
display: none;
}<button onclick="toggleDisplay()">click me</button>
<div class="ytvid">ytvid</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句