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：

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

$("#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>

fadeToggle div，点击它旁边

1 个答案: