9

よくわかりません。ローカルで HTML ページを起動すると、ドロップダウン メニューが機能しません。

bootply に自分の html コードをコピーして貼り付けてみました。信じられない ...

http://bootply.com/90610

何か案が ？

すべての js ファイルを含めるのではなく、ドロップダウンに必要なファイル (dropdown.js) だけを含めます。

何を試せばいいのかさっぱりわからなかった…

誰かが私を助けることができれば、本当に感謝します。

ありがとうございました

4

3 に答える 3

22

これを独自の HTML ページに配置する場合は、jQuery 1.X または 2.X を含める必要があります (3.3.7 より前の Bootstrap バージョンは JQuery 3.X と互換性がありません)。必ず、 bootstrap.js (または dropdown.js)の前に jquery.js を含めてください。</body>通常、これはタグの直前に行います。

これは完全に機能する例です。Bootstrap と jQuery は外部 CDN から読み込まれます。

<html>
<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

        </div>
        <!--/.nav-collapse -->
    </div>
</div>

<!-- include javascript, jQuery FIRST -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>

</html>

これを .html ファイルに入れて、ブラウザで開きます。

于 2013-10-28T21:36:16.837 に答える