如何在单击按钮之前隐藏 div 内容？

Question

我只想让按钮出现在网页加载中，然后单击时出现以下 div。我尝试了其他人推荐的其他解决方案，并且每当我使用 display: none;在 .ytvid 上，单击按钮时将不再出现。我认为通过让 jQuery 在单击按钮时说出它会在块中显示它会起作用。唉，我被困住了。帮助将不胜感激。

我一点也不擅长 jQuery。我试图研究这个问题，但在试图理解人们的答案时迷失了方向。我试过 display: none;并改变了 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 将被隐藏，直到有按钮点击。

Answer 1

这是针对这种情况的基本设置，不包括 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>

Answer 2

function myFunction() {
  var div = document.getElementById('myDiv');
  div.style.display = div.style.display === 'block' ? 'none' : 'block';
}

$('#btn2').on('click', function() {
  $('#myDiv').toggle();
})

#myDiv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myDiv">content</div>
<button class="button" onclick="myFunction()">Via native Js </button>
<button id="btn2" class="button">Via jquery</button>

这是隐藏和显示的两种方式，分别通过原生js和jquery。

Answer 3

  <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
          $("#contatiner").css("visibility", "hidden");
    });
    function myFunction() {
        $("#contatiner").css("visibility", "visible");

    }
</script>

<div class="wrapper" id="contatiner">
   <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>
   </div>
   <button class="button" id="video" onclick="myFunction();return false;">click me</button>