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

【问题标题】：How to show/hide div click on image如何显示/隐藏 div 点击图片
【发布时间】：2019-07-23 11:18:16
【问题描述】：

我想在用户点击它时显示/隐藏 div。我找到了 fiddle，但它适用于输入，我想与 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>

【问题讨论】：

什么意思？您希望显示图像而不是文本吗？
欢迎在 SO 上发帖：请always do a search 在 SO 上发帖之前。
点赞：jsfiddle.net/gkb1u4L7/4

标签： javascript html css

【解决方案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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

试试下面的代码，我用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>

【讨论】：

【解决方案4】：

这样就可以了。

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

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>

【讨论】：

感谢您的回复，实际上它工作正常，但这是一个小问题，实际上我需要当用户单击图像时它会显示内容，当用户单击窗口时它会隐藏内容。
我只想隐藏文本，如果用户点击空白或窗口
根据您的要求进行更改。