如何在单击图像时隐藏/显示div

Question

我只想在用户单击特定图像时显示div。请指导我如何在jquery中实现这一目标。

我想显示ID为图片的"demoDiv"，onclick事件的div。

<div id="demoDiv"></div>
<img src="../images/demo.png" width="30px" height="30px" /><label for="report">Demo Report</label>

在上图的onclick上，我想显示我的"demoDiv" div

Answer 1

您可以通过使用jQuery toggle（）函数来实现此目的。

$("#image_id").on("click",function(){

       $("#demoDiv").toggle();

});

或者仅通过使用show / Hide方法即可。

对给定的类激活div，然后通过功能toggleClass（“ active”）;切换该特定类；

Answer 2

如果您使用的是引导程序：

<div id="demoDiv" class="hidden">Demo</div>
<img id="demoImg" src="/test.jpg" />
<script>
    $('#demoImg').click(function() {
        $('#demoDiv').toggleClass('hidden');
    })
</script>