ページ上の特定の要素をクリックしてドロップダウンを閉じる

Question

私はこのジャンボメニューを持っています（実際のフィドルで実装するのは本当に難しいので、謝罪します）が、私は達成しようとしていることを説明しようとします。

だから、今すぐドロップダウンはその隣のドロップダウンをクリックするだけで終了しますが、本文のどこかをクリックすると閉じる必要があります。だから、私は "#navigation"をクリックしたときにドロップダウンを閉じる部分的な解決策を得ましたが、他のすべての要素をクリックしたときには閉じませんでした。外にクリックしたときにドロップダウンが閉じられるように、他のすべての要素を適切に選択するにはどうすればよいですか？すべての助けに感謝します。

$(function() { 
    var navItem1 = document.getElementById('navItem1'); 
    var navItem2 = document.getElementById('navItem2'); 
    var otherElements = $("body > *").not("#navigation"); 
    console.log(otherElements); // prints normally 

    $('html').click(function (e) { 
     console.log(otherElements); // prints normally 
     if (e.target.id == 'navigation' || e.target == otherElements) { 
     navItem1.style.display = "none"; 
     navItem2.style.display = "none"; 
    } else { 
     //do something 
    } 
}); 
}); 

Answer 1

：あなたは何ができるか

がこのようにしないで使用していますナビを閉じるにはクリックできません：

$('body').click(function(event){ 
    var notClickableSelector; //your currently open dropdown 
    if($(event.target).closest(notClickableSelector).length === 0){ 
     //do something 
    } 
}); 

このコードは、event.targetに特定の親（notClickableSelector）があるかどうかをチェックします。 これにより、現在開いているドロップダウンを除き、ページ上のどこかでクリックイベントを発生させることができます。つまり、まだ閉じずにドロップダウンでクリックすることはできますが、ユーザーがページの他の場所をクリックすると閉じられます。

Answer 2

htmlを使用することは、文書内のすべての内部要素の親タグとしてスマートではありません。

何もしません： 一致する要素のセットから要素を削除します。 だから：だから

id="navigation" 

あなたがやっているとき：ナビゲーションがあれば

$("body > *").not("#navigation"); 

が値をID attrのを含む要素を削除します

if (e.target.id == 'navigation' || e.target == otherElements) 

はありません基本的にありナビゲーション要素は、あなたは常に偽を取得します。 jqueryのから

$("input:not(:checked) + span").css("background-color", "yellow"); 
$("input").attr("disabled", "disabled"); 

documentation for not selector

とあなたはそれを好転させると、あなたが上がらないものをブラックリストすることがありますjqueryのdocumentation for .not() method