Question

我无法解决导致我的脚本失败的问题。

Here是我使用的代码。虽然它在JsFiddle中完美无缺，但是当我在我的网站上实现它时它根本不起作用。

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $("#overlay").hide();
    $("#work").click(function(e){
        $("#overlay").toggle();
        e.stopPropagation();
    });
    $(document).click(function(){
        $("#overlay").hide();
    });
    $("#overlay").click(function(e){
        e.stopPropagation();
    });
    </script>
    </head>

    <body>
    <div id="work"></div>
    <div id="overlay"><iframe width="100%" height="100%" src="//www.youtube.com/embed/uQFGkGk4PSc" frameborder="0" allowfullscreen></iframe></div>
    </body>

Link to site

谢谢！

Answer 1

你只需要像这样包装你的代码：

$(document).ready(function() {

    $("#overlay").hide();
    $("#work").click(function(e){
        $("#overlay").toggle();
        e.stopPropagation();
    });
    $(document).click(function(){
        $("#overlay").hide();
    });
    $("#overlay").click(function(e){
        e.stopPropagation();
    });

});

默认情况下，Fiddle运行onLoad上的代码，您将其放在<head>中。您可以在左上角设置选项。我将其更改为in <head>并且它也没有在那里工作：http://jsfiddle.net/N9cbk/8/

在此处详细了解$( document ).ready()：http://learn.jquery.com/using-jquery-core/document-ready/

Jquery隐藏显示无法正常工作

1 个答案: