[英]Show/Hide div on image click not working
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. 如果您访问http://oandg.co.uk.s156312.gridserver.com/#work并选择一个投资组合项目,然后单击“更多”,您将看到一个图像和一个在角落有一个小“ 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”,则文本框将消失,而如果再次单击它,它将显示。
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: 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>
Any ideas? 有任何想法吗?
$(function () {
$(".openBoxButton").click(function () {
$('#colorbox').fadeIn(1200);
$.colorbox();
});
$('.rsABlock').on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
EDIT: 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. 编辑:只是为了对此做一些解释,您之前在“ .openBoxButton”类的每次单击上都添加了一个单击处理程序-现在我没有在您的页面中搜索该类,但是将其放置在该函数之外可防止事件处理程序从被重复添加。
EDIT based on comment: I tested using developer tools and it works. 根据评论进行编辑:我使用开发人员工具进行了测试,并且可以正常工作。 #colorBox does not seem to work - likely added/removed cycle or something.
#colorBox似乎不起作用-可能添加/删除了循环或其他内容。
$(document).on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
Yes... You can do that with CSS: 是的...您可以使用CSS来做到这一点:
<!-- HTML -->
<div class="container">
<img src="http://placekitten.com/285/275" class="portfolio" alt="">
<div class="mask">
<h2>Froosh</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nostrum porro iste excepturi vel ducimus cumque minima rem voluptates cum!</p>
</div>
</div>
/* CSS */
.container {
/* Some width */
width: 200px;
display: inline-block;
position: relative;
border: 3px solid #ccc;
}
.container img {
display: block;
width: 100%;
}
.container .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* some color */
background: rgba(255, 255, 255, 0.5);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
/* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out;
/* Firefox 4-15 */
-o-transition: all 0.3s ease-out;
/* Opera 10.50–12.00 */
transition: all 0.3s ease-out;
/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.container:hover .mask {
opacity: 1;
}
There is a JsFiddle: http://jsfiddle.net/KaCHN/1/ 有一个JsFiddle: http : //jsfiddle.net/KaCHN/1/
Is up to you put some style on the .mask
element 由您决定是否在
.mask
元素上.mask
样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.