div를 숨길 때 테이블 외부를 클릭하십시오.

Question

JavaScript의 새로운 기능 (HTML & CSS의 중간)입니다. 다른 예제를 찾아 내서 직접 작업하는 것이 좋습니다. 불행히도이 문제에 중대한 문제가 있습니다.

나는 뷰어에 3 개의 링크를 표시하는 테이블이 있습니다. 각 링크를 클릭하면 숨겨진 div가 오른쪽으로 열립니다. 다른 링크 중 하나를 클릭하면 열려있는 div가 숨김으로 다시 슬라이드 한 다음 다른 슬라이드가 열립니다.

내가 찾고있는 것은 링크에서 마우스를 다시 클릭 할 때 div를 숨기거나 div (또는 페이지의 아무 곳에서나)를 마우스로 클릭했을 때 div를 숨기는 것입니다.

"e.stopPropagation"을 사용해 보았지만 나에게 적합하지 않은 것 같습니다.

도움을 주시면 감사하겠습니다. - 감사합니다.

은 내가 연습 만든 jsFiddle 있습니다 http://jsfiddle.net/AuU6D/3/

이 내 jQuery 코드입니다 :

jQuery(function ($) { 
    $('a.panel').click(function() { 
     var $target = $($(this).attr('href')), 
      $other = $target.siblings('.active'), 
      animIn = function() { 
       $target.addClass('active').show().css({ 
        left: -($target.width()) 
       }).animate({ 
        left: 0 
       }, 500); 

      }; 

     if (!$target.hasClass('active') && $other.length > 0) { 
      $other.each(function (index, self) { 
       var $this = $(this); 
       $this.removeClass('active').animate({ 
        left: -$this.width() 
       }, 500, animIn);     
      }); 
     } else if (!$target.hasClass('active')) { 
      animIn(); 

    } 

    }); 

}); 

Answer 1

을 시도해보십시오

jQuery(function ($) { 

    $('a.panel').click(function() { 
     var $target = $($(this).attr('href')), 
      $other = $target.siblings('.active'), 
      animIn = function() { 
       $target.addClass('active').show().css({ 
        left: -($target.width()) 
       }).finish().animate({ 
        left: 0 
       }, 500); 

      }; 

     if (!$target.hasClass('active') && $other.length > 0) { 
      $other.each(function (index, self) { 
       var $this = $(this); 
       $this.removeClass('active').animate({ 
        left: -$this.width() 
       }, 500, animIn);     
      }); 
     } else if (!$target.hasClass('active')) { 
      animIn(); 
     } else if ($target.hasClass('active')) { 
       $target.removeClass('active').finish().animate({ 
        left: -$target.width() 
       }, 500);     
     } 

    }); 

    $(document).click(function(e){ 
     var $target = $(e.target), $active = $('div.panel.active'); 

     if($active.length && $target.closest('a.panel').length == 0 && $target.closest($active).length == 0){ 
       $active.removeClass('active').finish().animate({ 
        left: -$active.width() 
       }, 500);     
     } 
    }) 

}); 

데모 : Fiddle

Answer 2

DEMO

$(document).click(function (e) { 
     if (!$(e.target).hasClass('panel')) { 
      $('div.panel').removeClass('active').removeAttr('style').css('background', ' #e4e4e4'); 
     } 
    }); 

또는 안녕 아룬

$(document).click(function (e) { 
    console.log($(e.target).hasClass('panel')); 
    if (!$(e.target).hasClass('panel')) { 
     $('div.panel.active').removeClass('active').finish().animate({ 
      left: -$('#right').width() 
     }, 500); 
    } 
});