JQuery 토글은 첫 번째 클릭에서 작동하지만 (예상대로)

Question

나는 다른 요소를 클릭하여 표시되는 (전환 한) div를 만들고 있습니다.

앵커 (#toggle-contents)를 클릭하고 문서에서 동일한 앵커 또는 다른 곳을 클릭하면 숨겨져 있어야합니다.

나는이 사용법의 코드를 따르고 있습니다 : Creative overlay/popup with jQuery.

현재 처음으로 클릭하기 위해 노력하고 있습니다.하지만 곧 표시되고 숨겨집니다.

마크 업 :

<div id="block-header"> 
    <a id="trigger-contents">Toggle</a> 
    </div> 
    <div id="block-contents"> 
    </div> 

자바 스크립트가 :

function registerToggleDiv(trigger, toggle) 
{ 
    $('#' + trigger).click(function() 
    { 
     $('#' + toggle).toggle(function() 
     { 
     console.log('toggle'); 
     $(document).click(function(event) 
     { 
      if (!($(event.target).is('#' + toggle) || 
       $(event.target).parents('#' + toggle).length || 
       $(event.target).is('#' + trigger))) 
      { 
      console.log('toggle hide'); 
      $('#' + toggle).hide(500); 
      } 
     }); 
     }); 
    }); 
} 
registerToggleDiv('trigger-contents', 'block-contents'); 

나는 여기에 다른 토글 질문에 비교하는 오류를 찾을려고 노력하지만, 어떤 힌트를 찾을 수 없습니다.

어떤 힌트를 부탁드립니다.

Answer 1

trigger을 클릭하면 전파가 발생하고 onclick 문서가 실행됩니다.

$('#' + toggle).hide(500); 

당신이 아래 문서 클릭을 방지하기 위해 클릭 할 요소에 전파를 중지해야합니다 :

$('#' + trigger).click(function(e){ 
    e.stopPropagation(); 
});