[英]How to show/hide div click on image
I want to show/hide div when the user clicks on it. 我想在用户单击时显示/隐藏div。 I found fiddle but it works on input, I want to integrate with Image.
我找到了小提琴,但它可用于输入,我想与Image集成。 Please help me.
请帮我。
#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>
This will do the job. 这样就可以了。
EDIT: I have attached the event listener on body instead of image, so that the event can be detected. 编辑:我已将事件侦听器附加在正文而不是图像上,以便可以检测到该事件。 You can make changes to optimize the code, as what I have given is very naive.
您可以进行更改以优化代码,因为我给出的内容非常幼稚。
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>
Try this 尝试这个
#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>
Try below code, I have created with jquery, it is working fine. 尝试下面的代码,我已经用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.