Jquery 通过单击div旁边的按钮，将其淡入淡出切换状态

我有一个div，当用户点击这个div旁边的任何地方时，我想用jquery切换淡入淡出。我怎么做

---

有人能帮我吗？谢谢大家!

解决方案1:

假设您的身体包含以下分区：

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

解决方案2:

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

$（“#显示弹出窗口”）。在（“单击”，函数（）{
$（“#弹出包装”）.fadeIn（200）；
});
$（“#弹出包装”）。在（“单击”上，函数（e）{
if（e.target.id==“弹出包装器”）
$（“#弹出包装”）.fadeOut（200）；
});
#弹出式包装器{
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：透明；
}
#弹出窗口{
宽度：200px；
高度：100px；
背景：#efef；
位置：相对位置；
最高：50%；
左：50%；
左边距：-100px；
利润上限：-50px；
}

弹出窗口
您想使其淡出还是在单击其外部时切换淡出？切换淡出，因为在此之前我正在淡入淡出是的，但如果它是可见的，并且您想使其消失，则只需使用淡出即可。好的，我如何做到这一点？因为有id，我将其更改为event.target.id。但它不起作用，当淡入我的div时，它会立即淡出。我编辑了答案。现在有两种解决方案。一个与之前几乎相同，而秒是基于包含“popup”元素的“包装器”。
$("#showPopup").click(function(e) {
    e.stopPropagation();
    $("#popup").fadeIn(200);
});

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