js ページ上の他の場所をクリックして、表示されている DIV_javascript スキルを非表示にします-jsチュートリアル-php.cn

js ページ上の他の場所をクリックして、表示されている DIV_javascript スキルを非表示にします

WBOY

リリース： 2016-05-16 17:51:54

オリジナル

1298 人が閲覧しました

実装も非常に簡単ですが、クリック表示イベントではイベントのバブリングを防ぐ必要があり、そうしないとページのクリックイベントがトリガーされることに注意してください。ただし、これには欠点もあります。つまり、バブリングを防ぐイベントが同じページにある場合、DIV を非表示にすることができないため、そのようなイベントでは特別な処理が必要になります。非表示の DIV を自分で呼び出す必要があります (ただし、通常、このようなイベントは非表示にします)。それほど多くはありません);
JS:

コードをコピーしますコードは次のとおりです:

 
$(document ).ready(function() { 
//言語ヘッダーのイベントをクリックし、言語リストを表示
$(". language_selected").click(function(e) { 
$ (". language_list" ).toggle(); 
e.stopPropagation(); //イベントのバブリングを防止します。そうしないと、イベントが次のドキュメントのクリック イベントにバブリングします。
});ドキュメントをクリックしたときの言語 List
$(document).click(function() { 
$(". language_list").hide(); 
});言語リストの言語項目、選択した項目を更新し、言語リストを非表示にします 
$(". language_list li").click(function() { 
$(". language_selected").text($(this ).text()); 
$(". language_list").hide(); 
$("#noPopEvent").click(関数(e) { 
e .stopPropagation(); 
 }) 
}); 

 
コードをコピーします