带有 iframe 的 div，不显示

Question

I have a page where I am displaying a iframe from another page. I want that iframe to be display:none at load and become visible onClick. The issue is, I can get it to work if the div is visible at load. If it is hidden at load, the onclick doesnt work properly.

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


<div style="margin-top:30px;">
        <h2>Menu</h2>
        <p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at <a href="https://www.leafly.com/dispensary-info/pure-ohio-wellness" target="_blank" style="color:green">here</a></p>
            <p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
            <div>
            <div id="myDIV" style="display: none">
        <div id="leafly-menu">
            </div>
            <div style="text-align:center;">
            </div>
            <script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
        </div>
        <div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
          </div>
        </div>

Answer 1

I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.

Definitely worth another google for differences between the two, but thew3schools snippet here seems to summarize things pretty well.

Hope this helps!

Answer 2

You can easily display the elements inside the Div using the click() function of jQuery. You need to include the jQuery CDN or jQuery file to run the jQuery scripts.

 $(document).ready(function() { $("#showMe").click(function () { $("#myDIV").show(); }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div style="margin-top:30px;"> <h2>Menu</h2> <p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at <a href="https://www.leafly.com/dispensary-info/pure-ohio-wellness" target="_blank" style="color:green">here</a></p> <p><a id = "showMe" href="#">Springfield, Ohio Menu</a></p> <div id="myDIV" style="display: none"> <div > <div id="leafly-menu"> </div> <div style="text-align:center;"> </div> <script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script> <script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script> </div> <div style="overflow: hidden; margin: 15px auto; max-width: 975px;"> <iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;"> </iframe> </div> </div> </div>

I have updated the Fiddle with the two menus. https://jsfiddle.net/9b15gw0f/