1

我有一点问题，一段时间以来一直试图解决这个问题。搜索了很多主题，但没有找到任何可以帮助我的东西。

我编辑了一个我找到的 jsFiddle，并设计了这个简单的切换导航：

http://jsfiddle.net/liamtarpey/GzkN4/

唯一的问题是，我现在尝试将它集成到我的网站中，但它不起作用，我将其缩减为只是一个测试页面以尝试找出问题，但仍然没有运气。我正在使用 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 文件

脚本.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 可以没有或只是删除，它们都应该工作，这应该只是在页面加载时隐藏它）。

事情是它在浏览器中看起来很好，但它只是不起作用，它完全是静态的，就好像它没有读取任何脚本一样。

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

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

4

6 回答 6

2

您为 jQuery 使用了无效的 URL。

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

于 2012-10-23T12:58:27.253 回答
0

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

<script defer="defer" type="text/javascript" src="script.js"></script>
于 2012-10-23T12:22:56.057 回答
0

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

于 2012-10-23T12:24:50.860 回答
0

您需要将脚本包装script.js在$(document).ready()调用中：

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

这是关于 jQuery API 的页面.ready()： http: //api.jquery.com/ready/

于 2012-10-23T12:26:07.730 回答
0

?在准备功能结束时从您的 js 文件中删除符号。脚本对您来说可以正常工作 将您的代码放入

$(document).ready(function(){
});
于 2012-10-23T12:28:25.447 回答
0

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

<!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 的末尾

于 2012-10-23T12:29:22.447 回答