使用JavaScript或jQuery显示/隐藏块_Javascript_Jquery_Html_Css

使用JavaScript或jQuery显示/隐藏块

javascript jquery html css

使用JavaScript或jQuery显示/隐藏块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个HTML和图像块在Shopify中运行，我想在点击图像时显示和隐藏。我是jQuery新手，你能帮我吗 <div class="team__member grid__column grid__column--one-half-medium grid__column--one-quarter-large"> <h3>CEO&WRITER</h3> <p class="font-size--smaller">The CEO

我有一个HTML和图像块在Shopify中运行，我想在点击图像时显示和隐藏。我是jQuery新手，你能帮我吗

<div class="team__member grid__column grid__column--one-half-medium grid__column--one-quarter-large">
    <h3>CEO&WRITER</h3>
    <p class="font-size--smaller">The CEO maintains an active involvement in all aspects of the company, despite not having slept since 2016.</p>
    {% include 'image--asset', width: 1000, height: 836,  src: 'TEAM_CEO__CLEANUP_BC.png'%}
</div>


首席执行官兼作家
首席执行官积极参与公司的各个方面，尽管自2016年以来一直没有睡觉
{%包括'image--asset'，宽度：1000，高度：836，src:'TEAM_CEO__CLEANUP_BC.png%}

这是我想在点击图像时显示和隐藏的块

<div style="display: block;width: 100%!important;height: 200px;padding: 5px;background-color:yellow;background-image:linear-gradient(#c2aa00,#de490f); "> </div>

首先，必须为要隐藏或显示的元素设置id，然后可以使用jquery的

show（）

和

hide（）

方法

例如：

$('#YOURID').show()
$('#YOURID').hide()

学校：

html:

下面是为您编辑的代码片段。请确保您设置了 src用于img标签


//类，该类切换为显示或隐藏
.hide{display:none！重要；}
首席执行官兼作家
首席执行官积极参与公司的各个方面，尽管自2016年以来一直没有睡觉
//切换类的函数
函数fun（）{document.getElementById（“tog”）.classList.toggle（“hide”）；}

onclick您想隐藏显示块吗？W3school或jQuery文档应该可以帮助您复制

<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
  This is my DIV element.
</div>

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<head>

    //class that toggle to show or hide
    <style>
        .hide { display: none! important;}
    </style>

</head>

<body>

    <div class="team__member grid__column grid__column--one-half-medium grid__column--one-quarter-large">
        <h3>CEO&WRITER</h3>
        <p class="font-size--smaller">The CEO maintains an active involvement in all aspects of the company, despite not having slept since 2016.</p>
      <img onclick="fun()" src="#putimagesourcehere"></div>

        <div id="tog" class=" " style="width: 100%!important;height: 200px;padding: 5px;background-color:yellow;background-image:linear-gradient(#c2aa00,#de490f);"> </div>

        //funcion to toggle class
        <script>
            function fun() { document.getElementById("tog").classList.toggle("hide");}
        </script>

</body>

</html>