Question

我有一个问题，一直试图让我的头脑绕了很长一段时间。搜索了很多主题，但没有找到任何可以帮助我的东西。

我编辑了一个我发现的jsFiddle并设计了这个简单的Toggle导航：

唯一的问题是，我现在已经尝试将它集成到我的网站中，但它不起作用，我已经将其缩减为一个测试页面，试图找出问题但仍然没有运气。我正在使用WAMP服务器进行测试，我所有的PHP和其他javascript工作正常。

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery Test</title>
        <link rel="stylesheet" href="css/master.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript"></script>
        <script type="text/javascript" src="script.js"></script> 
    </head>

<body>

    <div class="alt-nav">
        <h3>Menu</h3>
            <ul>
                <li><a href="index.php">News</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="press.php">Press</a></li>
                <li><a href="gigs.php">Gigs</a></li>
                <li><a href="music.php">Music</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="videos.php">Videos</a></li>
                <li><a href="shop.php">Shop</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
    </div>  

</body>
</html>

这是外部.js文件

script.js：

$('.alt-nav').click(function() {
        $('ul').slideToggle(550, 'linear');
});?

最后是CSS：

.alt-nav {
    display: block;
    width: 100%;
    background: black;     
    border-bottom: 2px solid #F06;
}
.alt-nav h3, ul {
    color: white;
}
.alt-nav ul {
    display: none;
}

（ul可以是none或者只是删除，它们都应该工作，这应该只是在页面加载时隐藏它。）

它在浏览器中看起来很好但是它不起作用，它完全是静态的，好像它不是在阅读脚本一样。

有人可以帮我解决这个问题吗？

任何帮助将不胜感激。谢谢！

Answer 1

你正在使用jQuery的无效网址。

如果您想使用Google CDN，请使用//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Answer 2

您可以将脚本推迟到window.onload，以确保在执行脚本之前加载jQuery。

<script defer="defer" type="text/javascript" src="script.js"></script>

Answer 3

您的script.js正在加载文档准备好之前。

Answer 4

您需要在script.js电话中将您的脚本包装在$(document).ready()中：

$(document).ready(function(){ // or $(function(){
    $('.alt-nav').click(function() {
        $('ul').slideToggle(550, 'linear');
    });
});

以下是关于.ready()：http://api.jquery.com/ready/

的jQuery API页面

Answer 5

在ready函数结束时从js文件中删除?符号。脚本对你来说很好将代码放在

中

$(document).ready(function(){
});

Answer 6

在DOM解析器知道您的文档之前，您的script.js已加载。所以你的选择器 $（'。alt-nav'）会返回 null ，这就是你的事件没有发生的原因：它被绑定到一个空对象。您需要在body标记之后放置script.js include语句。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery Test</title>
        <link rel="stylesheet" href="css/master.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript">    </script>
    </head>

<body>
    <script type="text/javascript" src="script.js"></script> 
    <div class="alt-nav">
        <h3>Menu</h3>
            <ul>
                <li><a href="index.php">News</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="press.php">Press</a></li>
                <li><a href="gigs.php">Gigs</a></li>
                <li><a href="music.php">Music</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="videos.php">Videos</a></li>
                <li><a href="shop.php">Shop</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
    </div>  

</body>
</html>

另外，删除那个？在script.js的末尾

jsFiddle jQuery正在工作......没有在localhost上工作

6 个答案: