显示/隐藏DIV不工作

Question

如果你去http://oandg.co.uk.s156312.gridserver.com/#work并选择一个组合项目，然后单击“更多”，你会看到图像和文本框，一个小“我”在角落里。

我想使它所以如果你点击那个小“我”的文本框会消失，如果你再次点击它会显示出来。

我试过，但它什么都不做：

$(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> 

任何想法？

Answer 1

是......你可以做到这一点与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元素

Answer 2

$(function() { 
    $(".openBoxButton").click(function() { 
     $('#colorbox').fadeIn(1200); 
     $.colorbox(); 
    }); 

    $('.rsABlock').on('click', 'img.info', function (e) { 
     e.preventDefault(); 
     $('.caption-background').toggleClass('hidden'); 
    }); 
}); 

编辑：我想补充的这一番解释，您以前对“.openBoxButton”级的每次点击添加点击处理程序 - 现在我没有搜索在页面该类但功能外放置这可防止事件hanlder被反复添加。

基于评论的编辑：我使用开发人员工具进行测试，它的工作原理。 ＃colorbox似乎不工作 - 可能添加/删除周期或其他东西。

$(document).on('click', 'img.info', function (e) { 
    e.preventDefault(); 
    $('.caption-background').toggleClass('hidden'); 
});