當點擊它時隱藏一個div

Question

我添加了代碼來創建一個div，#pending-friend-list-dropdown，點擊它之外時關閉。這工作正常，但現在當點擊我的圖像股利，friend-icon，下拉div現在不會關閉。

正如你可以在我的代碼片段中看到的，圖像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元素（整個頁面），就可以通過運行代碼來更簡單地實現這一點。 然後檢查點擊是否位於某些元素上。

當點擊「＃朋友圖標」時，也不需要在兩個地方給出說明。我在下面的代碼中刪除了第二個實例，並將.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

好，你可以做一件事..隱藏的div當它失去焦點

實現與tabIndex屬性此 化妝格可聚焦，然後再連接onblur事件處理程序

代碼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;位置：固定的），然後把該層內的下拉列表中的內容。當用戶點擊該圖層時，它會立即關閉整個圖層並完成所有操作。