2014-11-21 100 views
0

我无法解决导致我的脚本失败的问题。jquery隐藏显示工作不正常

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

谢谢!

+0

任何内容的加载与AJAX? – 2014-11-21 15:27:02

+0

你确定你链接到jquery.js吗? – 2014-11-21 15:31:23

+0

检查您是否包含jQuery库。 – thecodeparadox 2014-11-21 15:31:34

回答

2

你只需要来包装你这样的代码:

$(document).ready(function() { 

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

}); 

在默认情况下,小提琴运行该代码上onLoad,你是把它放在<head>。您可以在左上角设置选项。我把它改成in <head>,它不是在那里工作之一:http://jsfiddle.net/N9cbk/8/

了解更多关于$(document).ready()这里:http://learn.jquery.com/using-jquery-core/document-ready/

+1

上面的codeparadox的版本是这个的简短版本,它们都是正确并且都将工作。确切地说,是 – 2014-11-21 15:35:40

+1

。因为这个,我使用了更长的版本:_如果你正在编写的代码是那些对jQuery没有经验的人可能会看到的,那么最好使用长表单._它来自我链接到的jQuery文档。 – balzafin 2014-11-21 15:37:50

+0

我知道,我写了我对OP好处的评论:) – 2014-11-21 15:39:11