顯示/隱藏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'); 
});