0

私はウェブサイト開発の初心者なので、他の開発者から提供されたパターンに従っています。ドロップダウンメニューに追加する方法については、このサイトのチュートリアルに従っています。

このチュートリアルに従って、別の人のスタック オーバーフローに関する質問が 1 つ見つかりました。リンクをなくしてしまい、履歴を調べても見つかりませんでした。誰かが、チュートリアルはブートストラップのバージョン 1 を使用して構築されていることを提案し、詳細についてはブートストラップ サイトを参照してください。私はそうしました (私の現在のバージョンは、ブートストラップのガイドを使用して反映されています) が、コードが機能しない理由についての洞察を得ることができませんでした。

ブートストラップ リソースと同様のスタック オーバーフローの質問をふるいにかけた後、

Twitter Bootstrap を使用したドロップダウン メニュー

Twitter Bootstrap ドロップダウン メニュー

Twitter Bootstrap 2 のドロップダウン メニューが機能しない

すべてがブートストラップの前にjqueryをインポートすることの重要性を強調しているように見えるので、これを行いましたが、私の問題を解決していないようです. ここに示すものがあります：http://imgur.com/UtYlUXG

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KTown Car Share</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://flip.hr/css/bootstrap.min.css"> </script>   

    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>

    <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
    <style type="text/css">
    body{
        padding-top: 60px;
        padding-bottom: 40px;
    }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/style.css"> 
</head>


<body>
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    Item1
                    </ul>
                </li>
            </ul>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

どんな助けでも大歓迎です！何を試すべきかについてのアイデアがありません。

4

1 に答える 1

3

私はあなたのhtmlとjavascriptをjsfiddleとその動作する http://jsfiddle.net/daJT7/3/にコピーして貼り付けました

私がコピーした部分：

$(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });


<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
                <ul class="dropdown-menu">
                Item1
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

だから私はそれがあなたの参照と関係があるに違いないと思います。私が気づいたことの一つは、

<script src="http://flip.hr/css/bootstrap.min.css"> </script>

無効です（スクリプトはスクリプト用であり、すでに別の行でブートストラップcssをインポートしています）。これを削除します。これにより、問題が発生する場合と発生しない場合があります。

補足として。ツイッターのブートストラップgithubや他の誰かのウェブサイトに直接リンクすることはありません（flip.hrがあなたのウェブサイトでない限り:)）。
代わりにCDNを使用してみてください（例：http ：//www.bootstrapcdn.com/ ）

于 2013-03-16T23:40:46.250 に答える