ホームページ >ウェブフロントエンド >jsチュートリアル >js ページ上の他の場所をクリックして、表示されている DIV_javascript スキルを非表示にします

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

WBOY
WBOYオリジナル
2016-05-16 17:51:541332ブラウズ

実装も非常に簡単ですが、クリック表示イベントではイベントのバブリングを防ぐ必要があり、そうしないとページのクリック イベントがトリガーされることに注意してください。ただし、これには欠点もあります。つまり、バブリングを防ぐイベントが同じページにある場合、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();
})
});


コードをコピーします

コードは次のとおりです。
. language_selected { cursor: pointer; } . language_list {
border: 1 ピクセル黒塗り;
}
. language_list li
{
カーソル : 1 ピクセル赤塗り; >
HTML:




コードをコピー


コードは次のとおりです:



  • 中文(简体)

🎜>
言語リストを非表示にしないでください、DIV を自分で表示する必要があります
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。