在图像上显示/隐藏div单击不起作用 [英] Show/Hide div on image click not working
问题描述
如果您访问 http://oandg.co.uk.s156312.gridserver .com/#work 并选择一个投资组合项目,然后单击更多",您将看到一个图像和一个在角落有一个小"i"的文本框.
If you go to http://oandg.co.uk.s156312.gridserver.com/#work and select a portfolio item and click 'More' you will see an image and a text box with a little 'i' in the corner.
我想这样做,所以如果您单击小"i",该文本框将消失,而如果再次单击它,它将显示.
I would like to make it so if you clicked the little 'i' the text box would disappear and if you clicked it again it would show.
我尝试了此操作,但无济于事:
I tried this but it does nothing:
$(function() {
$(".openBoxButton").click(function() {
$('#colorbox').fadeIn(1200);
$.colorbox();
$('.rsABlock img.info').click(function(e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
});
HTML:
<!-- Slide One -->
<div id="simple-slider-one" class="royalSlider rsDefault" style="width: 100%;">
<a class="rsImg" href="images/Froosh/froosh1.jpg">
<div class="rsABlock">
<img src="images/info.svg" alt="" class="info">
<div class="caption-background">
<h4>What we did for them</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
</div>
</div>
</a>
<a class="rsImg" href="images/Froosh/froosh2.jpg">
<div class="rsABlock">
<img src="images/info.svg" alt="" class="info">
<div class="caption-background">
<h4>What we did for them</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
</div>
</div>
</a>
有什么想法吗?
推荐答案
$(function () {
$(".openBoxButton").click(function () {
$('#colorbox').fadeIn(1200);
$.colorbox();
});
$('.rsABlock').on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
只是为了对此做些解释,您之前在".openBoxButton"类的每次单击上都添加了一个单击处理程序-现在,我没有在页面中搜索该类,但是将其放置在该函数之外可防止不再添加事件处理程序.
Just to add some explanation of this, you were previously adding a click handler on every click of the ".openBoxButton" class - now I did NOT search for that class in your page but placing this outside that function prevents the event hanlder from being repeatedly added.
根据评论进行我使用开发人员工具进行了测试,并且可以正常工作. #colorBox似乎不起作用-可能添加/删除了循环或其他内容.
EDIT based on comment: I tested using developer tools and it works. #colorBox does not seem to work - likely added/removed cycle or something.
$(document).on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
这篇关于在图像上显示/隐藏div单击不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!