[英]Show/Hide div on image click not working
如果您访问http://oandg.co.uk.s156312.gridserver.com/#work并选择一个投资组合项目,然后单击“更多”,您将看到一个图像和一个在角落有一个小“ i”的文本框。
我想这样做,所以如果您单击小“ i”,则文本框将消失,而如果再次单击它,它将显示。
我试过了,但是什么也没做:
$(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”类的每次单击上都添加了一个单击处理程序-现在我没有在您的页面中搜索该类,但是将其放置在该函数之外可防止事件处理程序从被重复添加。
根据评论进行编辑:我使用开发人员工具进行了测试,并且可以正常工作。 #colorBox似乎不起作用-可能添加/删除了循环或其他内容。
$(document).on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
是的...您可以使用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;
}
有一个JsFiddle: http : //jsfiddle.net/KaCHN/1/
由您决定是否在.mask
元素上.mask
样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.