표시 숨기기 풍선 div jquery 클릭 함수

Question

내 스크립트에 대해 하나의 질문이 있습니다. 는 나는 내가 거품 팝업을 만들려고 DEMO

codepen.io 에서이 링크를 클릭 만들었습니다. 내 onclick 함수가 작동 중입니다.

내 질문은 내 DEMO 페이지를 클릭하면 두 개의 이미지가 표시되고 그 이미지 위로 마우스를 가져 가면 검정색 div가 표시됩니다. 그럼이 div을 클릭하면 .bubble이 열리 겠지만, 마우스로이 div 버블을 열어도 계속 열려 있습니다. 확인이 유지 여는하지만 검은 사업부가 자동으로 display:none을 받고 있어야한다 => 나는 싶지 않아 그 (난이. 할 수있는 방법) 다음을 클릭하면 또한

오른쪽 검은 색 DIV를 당신은 여전히 ​​.bubble 왼쪽 참조 다른 검은 색을 클릭하면 원하는대로 열어 두십시오. div 다음 다른 거품이 자동으로 나타납니다. hide.

누구나 이와 관련하여 도움을받을 수 있습니까?

이 내 JQuery와 함수이다 : 당신은 그냥 CSS의이 조각 수정할 수

$(document).ready(function() { 
      $('.nav-toggle').click(function(){ 
      var collapse_content_selector = $(this).attr('href');  
      var toggle_switch = $(this); 
      $(collapse_content_selector).toggle(function(){ 
       if($(this).css('display')=='none'){ 
       toggle_switch.html('x'); 
       }else{ 
       toggle_switch.html('x'); 
       } 
      }); 
      }); 
     }); 

Answer 1

:

.imgar:hover .delete, .imgar.selected .delete{ 
display: block; 
} 

공지 사항, 난 당신이 JS 이벤트를 수행 할 때 그래서 클릭을 추가 클래스 selected 추가 그래서 같은 imgar에 클래스 이벤트 :

$('.imgar').addClass('selected');

,

그리고 그 요소에 다시 클릭하면 클래스를 제거하는 것을 잊지 마세요 :

$('.imgar').removeClass('selected');

편집

JS

$(document).ready(function() { 
      $('.nav-toggle').click(function(){ 
      var collapse_content_selector = $(this).attr('href');  
      var toggle_switch = $(this); 
      $('.imgar').removeClass('selected'); // Remove the X before openning a second 
      if($(collapse_content_selector).css('display')=='none'){ 
       $('.bubble').hide(); 
      } 
      $(collapse_content_selector).toggle(function(){ 
       if($(this).css('display')=='none'){ 
      toggle_switch.parent().parent().removeClass('selected'); 
       toggle_switch.html('x'); 
       }else{ 
      toggle_switch.parent().parent().addClass('selected'); 
       toggle_switch.html('x'); 
       } 
      }); 
      }); 

     }); 

CSS

.imgar:hover .delete, .imgar.selected .delete{ 
    display: block; 
} 

Codepen http://codepen.io/SebastienBeaulieu/pen/RNPzzL