使用 JavaScript 或 jQuery 显示/隐藏块答案

【问题标题】：Show/hide block with JavaScript or jQuery使用 JavaScript 或 jQuery 显示/隐藏块
【发布时间】：2019-10-14 22:16:12
【问题描述】：

我在 Shopify 中运行了一段 HTML 和图像，我想在单击图像时显示和隐藏。我是 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>

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

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

【问题讨论】：

onclick 你想隐藏显示块吗？
W3school 或 jQuery 文档应该对您有所帮助 jQuery Effects - Hide and Show
Show/hide 'div' using JavaScript的可能重复

标签： javascript jquery html css

【解决方案1】：

来自 w3schools：https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

html:

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

Javascript：

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

【讨论】：

【解决方案2】：

这是为您编辑的代码 sn-p。请确保您设置了 src 用于 img 标签。

<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>

【讨论】：

【解决方案3】：

首先你必须为你想要隐藏或显示的元素设置一个id，之后你可以使用jquery的show()和hide()方法。

例子：

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

【讨论】：