実装も非常に簡単ですが、クリック表示イベントではイベントのバブリングを防ぐ必要があり、そうしないとページのクリック イベントがトリガーされることに注意してください。ただし、これには欠点もあります。つまり、バブリングを防ぐイベントが同じページにある場合、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();
})
});
コードをコピーします
コードは次のとおりです。
border: 1 ピクセル黒塗り;
}
. language_list li
{
カーソル : 1 ピクセル赤塗り; >
HTML:
コードをコピー
コードは次のとおりです:
言語リストを非表示にしないでください、DIV を自分で表示する必要があります
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
