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>

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

4 个答案: