JQuery Toggleは最初のクリックで動作しますが、（期待どおり）

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> 

のjavascript：

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が発生します。

あなたはonclickイベントを文書化するために結合されています

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

あなたは以下のように文書のクリックを防ぐために、クリックした要素に伝播を停止する必要があります。

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