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ファイルです

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 はなしにすることも、単に削除することもできます。どちらも機能するはずです。これにより、ページの読み込み時に非表示になるはずです)。

ブラウザでは問題ないように見えますが、機能しません。スクリプトをまったく読み取っていないかのように完全に静的です。

誰かがこの問題について私を助けてくれませんか?

どんな助けでも大歓迎です。ありがとう！

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 に答える