jquery隐藏显示工作不正常

问题描述：

我无法解决导致我的脚本失败的问题。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

谢谢！

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

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

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

答

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

$(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/

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

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

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

jquery隐藏显示工作不正常

相关推荐