特定の領域を選択するときにdivを表示し、bodyをクリックするときにdivを非表示にします。

Question

ナビゲーションで私はdivを持っています。このdivを選択すると、別のdivがオプション付きで表示されます。ユーザーがdivの外側を選択できるようにしたいと思います。divを閉じるとdivを選択するだけでなく、ユーザーは明らかにこれを再度開くことができます。それをFacebookのナビゲーションドロップダウンと考えてください。その振る舞いを再現しようとしています。

HTML

<div class="headRight"> 
    <ul> 
    <li><a id="settings"><div id="here">Account Settings</div></a></li> 
    </ul> 
</div> 
<div class="navi"> 
<ul> 
    <li><a><span>Signout</span></a> 
    </li> 
</ul> 
</div> 

CSS

#here{ 
    background-image: url(image.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative; 
} 
#here.active{ 
    background-image: url(someimeage.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative; 
} 
.navi{ 
    background: white;width: 200px;box-shadow:0px 1px 8px 0px rgba(0, 0, 0, .3);height: 122px;float: right;left: 759px;top: 45px;position: absolute; display:none; 
} 

JS

$j("#settings").click(function(e){ 
       if($j("#here").hasClass("active")){ 
       $j("#here").removeClass("active") 
       $j(".navi").hide(); 
       } 
       else{ 
       $j("#here").addClass("active") 
       $j(".navi").show(); 
       } 
      }); 
      $j(document).click(function(e) { 
       if (e.target.className !== "navi" && !$j(".navi").find(e.target).length && $j('.navi').css('display') == 'block') { 
       $j(".navi").hide(); 
       } 
      }) 

Answer 1

簡単な方法が言ったのdivと体にクリックリスナーを追加することです

$("#first").click(function (e) { 
 
\t e.stopPropagation(); 
 
\t $("#second").show(); 
 
}); 
 

 
$("body").click(function (e) { 
 
\t $("#second").hide(); 
 
})

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="first" style="width: 200px; height: 300px; border: 3px solid black"> 
 

 
</div> 
 
<div id="second" style="width: 200px; height: 300px; border: 3px solid black; display: none"> 
 

 
</div>

しかし、これはevent.stopPropagationを使用しています。何らかの理由でイベントを受信したい別の要素の中にネストされているため、伝播を停止したくない場合は、代わりにイベントが呼び出された場所を確認して、本体かどうかを確認できます。

$("#first").click(function (e) { 
 
\t $("#second").show(); 
 
}); 
 

 
$("body").click(function (e) { 
 
\t console.log(event.target.nodeName); 
 
\t if (event.target.nodeName != "BODY") 
 
    \t return 
 
\t $("#second").hide(); 
 
})

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="first" style="width: 200px; height: 300px; border: 3px solid black"> 
 

 
</div> 
 
<div id="second" style="width: 200px; height: 300px; border: 3px solid black; display: none"> 
 

 
</div>