fadeToggle div，通过点击它旁边

Question

我有一个div，我想切换当用户点击这个div旁边的任何地方时，用jQuery来切换它。我怎样才能做到这一点？

任何人都可以帮助我吗？谢谢！

Answer 1

解决方案1：

比方说你的身体中含有这个div：

<a href="#show" id="showPopup">show</a> 
<div class="popup">Popup</div> 

那么你可以尝试这样的事：

$("#showPopup").click(function(e) { 
    e.stopPropagation(); 
    $("#popup").fadeIn(200); 
}); 

$(document).on("click", function(e) { 
    e.stopPropagation(); 
    if (e.target.className != "popup") { 
     $(".popup").fadeOut(200); 
    } 
}); 

解决方案2：

在这个解决方案中，我们有一个外部包装器，它将覆盖窗口的所有宽度和高度，因此，当我们想要淡出弹出窗口时，我们只需测试用户是否点击了弹出窗口或包装器。这可以避免在前面的例子中，如果已经在其他事件处理程序中使用了奇怪的行为。

$("#showPopup").on("click", function() { 
 
    $("#popup-wrapper").fadeIn(200); 
 
}); 
 

 
$("#popup-wrapper").on("click", function(e) { 
 
    if (e.target.id == "popup-wrapper") 
 
     $("#popup-wrapper").fadeOut(200); 
 
});

#popup-wrapper { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 

 
#popup { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #efefef; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: -50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#show" id="showPopup">show</a> 
 
<div id="popup-wrapper"> 
 
    <div id="popup">Popup</div> 
 
</div>