jQuery - イベントのボックスの表示/非表示が機能しません。どうして？

Question

私は、この機能を使用して、ページ上の他の場所をクリックすると、クリックするとリスト（ul）を表示して非表示にします。動作していないよう：

$(document).ready(function() { 
    $('#trigger').click(function() { 
     $('#dropdown-options').show(); 
    }); 

    $(document).click(function() { 
     $('#dropdown-options').hide(); 
    }); 

    $('#dropdown-options').click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

（私はRuby on Railsでを使用しています、そしてすべてがそれを動作させるために、$(document).ready(function() {...});の下でなければなりませんようです。）

Answer 1

文書は、「＃が含まれているので、それが実際ですトリガー "と表示され、同時に非表示にされます。 "stopPropagation"を "#trigger"セレクタに移動し、ドキュメントがそれを取得して再び隠れる前にイベントの小道具を停止する必要があります。

$(document).ready(function() { 
    $('#trigger').click(function(e) { 
    e.stopPropagation(); 
    $('#dropdown-options').show(); 
    }); 

    $(document).click(function() { 
    $('#dropdown-options').hide(); 
    }); 
});