如何显示/隐藏div点击图片

Question

我想在用户单击时显示/隐藏div。 我找到了小提琴，但它可用于输入，我想与Image集成。 请帮我。

 #content { display: none; } input[type="text"]{ color: transparent; text-shadow: 0 0 0 #000; padding: 6px 12px; width: 150px; cursor: pointer; } input[type="text"]:focus{ outline: none; } input:focus + div#content { display: block; } 

 <input type="text" value="CLICK TO SHOW CONTENT"> <div id="content"> and the content will show. </div> 

Answer 1

仅显示图像而不是文本应该可以。

<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
<img src="https://i.imgur.com/ZCbBNIt.png">
and the content will show.
</div>

参见： JsFiddle

Answer 2

这样就可以了。

编辑：我已将事件侦听器附加在正文而不是图像上，以便可以检测到该事件。 您可以进行更改以优化代码，因为我给出的内容非常幼稚。

 var isVisible = false; function toggleDivDisplay(event) { var contentDiv = document.getElementById("content"); if (isVisible) { contentDiv.style.display = "none"; isVisible = !isVisible; } else if(event != undefined && 'target' in event && event.target.id == "imgId") { contentDiv.style.display = "block"; isVisible = !isVisible; } } document.body.onclick = toggleDivDisplay; 

 #content { display: none; } 

 <img id="imgId" src="https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/3/35/IronMan-EndgameProfile.jpg/revision/latest/scale-to-width-down/2000?cb=20190423175213" height="50" width="50" onclick="toggleDivDisplay()"> <div id="content"> The content will show. </div> 

Answer 3

尝试这个

 #content { display: none; } img{ color: transparent; text-shadow: 0 0 0 #000; padding: 6px 12px; width: 150px; cursor: pointer; } img:focus{ outline: none; } img:focus + div#content { display: block; } 

 <img src='https://homepages.cae.wisc.edu/~ece533/images/airplane.png' tabindex="0"/> <div id='content'> and the content will show. </div> 

Answer 4

尝试下面的代码，我已经用jquery创建了，它工作正常。

   <img src='https://homepages.cae.wisc.edu/~ece533/images/airplane.png' tabindex="0" class="imgClick "/>
    <div id='content'>
        and the content will show.
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

    <script>
        $(document).ready(function(e) {
            $('.imgClick').click(function(){
                $('#content').toggle();                                
            });
        });
    </script>