jQuery

Question

我有一个简单的问题。我正在尝试在用户单击 div 时显示视频。然后，当用户单击页面上不在视频上的任何位置时，隐藏该视频。完成了数百万次，但我找不到如何去做，Whosebug 上的其他部分解决方案也失败了。这是完整的代码：

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- CSS -->
<style>#videoDiv{display:none;}</style>

<!-- jQuery -->
<script>
$(function(){
    $(".clickForVideo").click(function(){
        $("#videoDiv").show();
    });
    $(document).click(function(event){
        if ($('#videoDiv').is(':visible')) {    
        /*  tried replacing above line with this line according to Whosebug - also failed
        if(!$(event.target).closest('#videodiv').length) {  */
            $('#videoDiv').hide(); <!--Reference 1-->
        }
    });
});
</script></head>

<!-- HTML -->
<body>
<div id="videoDiv"><iframe src="https://www.youtube.com/embed/S28Zux62a_0">
</iframe></div>
<div class="clickForVideo">Click me to show video</div>
</body></html>

当我点击“.clickForVideo”div 时，没有视频出现。如果我注释掉标记为 "Reference 1" 的行，然后单击“.clickForVideo”，则会出现 video/div，但是，在按预期单击文档时不会消失。我将如何更改我的代码或为这个问题提供不同的解决方案。非常感谢。安德鲁

Answer 1

这是因为 clickForVideo 也是文档的一部分。并且当你点击它的时候，document(parent)的点击事件也被调用，它再次隐藏它。

试试这个：

$(function(){
    $(".clickForVideo").click(function(event) {
        event.stopPropagation(); //<-----
        $("#videoDiv").show();
    });
    $(document).click(function(event){
        if ($('#videoDiv').is(':visible')) {
          if(!$(event.target).closest('#videodiv').length) {
            $('#videoDiv').hide();
          }
        }
    });
});

event.stopPropagation()(DOC) 应该停止将事件冒泡到父级，即 document

jQuery - 单击 Div2 时显示 Div1，然后在单击文档时隐藏 Div1

jQuery - Show Div1 on Div2 Click, then Hide Div1 on Document Click

show

hide