divをクリックして非表示にすると非表示

Question

divを作成するコードが追加されました。#pending-friend-list-dropdownは、その外をクリックすると閉じます。これはうまくいきますが、今度は画像のdiv、friend-iconをクリックすると、ドロップダウン・ダブが終了しません。

私のスニペットからわかるように、イメージdivはドロップダウンボックスを開きます。私はちょうどドロップダウンdivを閉じるためにmouseup関数を使用している間に、その画像divがドロップダウンを開いたり閉じたりするのにどのように使用できるか把握しようとしています。

//Hiding Pending Friend Drop-down when clicking out of it 
 
$(document).mouseup(function (e) 
 
{ 
 
    var container = $("#pending-friend-list-dropdown"); 
 
\t var friend_icon = $("#friend-icon"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
    { 
 
     container.hide(); 
 
    } 
 
\t else if (friend_icon.has(e.target)) { 
 
\t \t container.hide(); 
 
\t } 
 
}); 
 

 
//Toggle Pending Friend List 
 
$("#friend-icon").click(function() { 
 
\t $('#pending-friend-list-dropdown').toggle(100); 
 
});

#main-bar { 
 
\t width: 85%; 
 
\t height: 60px; 
 
\t position: relative; 
 
\t margin-left: 15%; 
 
\t background: red; 
 
\t padding: 3px 0; 
 
} 
 
#main-bar-container { 
 
\t border: 1px solid black; 
 
\t margin: 0 10px; 
 
\t position: relative; 
 
\t width: 95%; 
 
\t height: 56px; 
 
\t left: 2%; 
 
} 
 
/*---- Pending Friends List----*/ 
 
#friend-icon { 
 
\t display: inline-block; 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t right: 20%; 
 
\t top: 15px; 
 
} 
 
#friend-icon img { 
 
\t height: 30px; 
 
\t width: 30px; 
 
} 
 
#pending-friend-list-dropdown { 
 
\t height: 500px; 
 
\t width: 400px; 
 
\t overflow: scroll; 
 
\t z-index: 100000; 
 
\t position: absolute; 
 
\t left: 70%; 
 
\t top: 70px; 
 
\t background: blue; 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-bar"> 
 
\t \t <div id="main-bar-container"> 
 
\t \t \t <div id="friend-icon"><img src="../icons/collection/social.png" alt="Pending Friends"></div> 
 
\t \t </div> 
 
\t </div> 
 
<div id="pending-friend-list-dropdown"> 
 
    </div>

Answer 1

誰かがhtml要素（ページ全体）をクリックするたびにコードを実行することで、これをより簡単に行うことができます。 次に、クリックが特定の要素にあるかどうかを確認します。

"＃friend-icon"をクリックしたときに何をするかについての指示を2か所に与える必要はありません。以下のコードでこの2番目のインスタンスを削除し、.toggleをifステートメントに移動しました。ここで

$("html").click(function(event) 
{ 

var container = "#pending-friend-list-dropdown"; 
var friend_icon = '#friend-icon, #friend-icon img'; 

    if ($(event.target).is(friend_icon)) // clicking on the toggler-div or the img it contains 
    {  
     $(container).toggle(100); 
    } 
    else if (!$(event.target).is(friend_icon) // clicking outside of the toggler 
    && !$(event.target).is(container)) // and outside of the toggled div itself 
    { 
     $(container).hide(); 
    } 
}); 

をjsfiddleです：

は、今では魔法のように動作https://jsfiddle.net/r54ardcz/2/

Answer 2

それはtabIndexプロパティで、この メイクのdivフォーカス可能を達成し、その後

のonblurイベントハンドラをアタッチする

のフォーカスを失ったときにも、あなたは...非表示のdiv一つのことを行うことができます

コードhttp://jsbin.com/viginezape/edit?html,css,js,console,output

Answer 3

は私が知っているすべてのものは、このサイト上にあるだけのように第三の選択肢を与えるでしょう。これはOffice Fabric UIが（https://dev.office.com/fabric#/components/contextualmenu）@ zheer-mchammer-husainの答えがTwitter Bootstrapモデルに近いと思われるオプションです。

基本的には、ページ全体（高さ：100vh、幅：100vw、位置：固定）にレイヤーを作成し、そのレイヤー内にドロップダウンコンテンツを配置します。ユーザーがそのレイヤーをクリックすると、一度にレイヤー全体が閉じられ、すべてが完了します。