html fileは、ブートストラップのデフォルトのナビゲーションバーの例from this pageで作成しました。 Chrome、Firefox、またはIEでファイルを開くと、ドロップダウンメニューが機能しません。ただし、bootstrap webpage showing the exampleはChromeで動作します。私は間違って何をしていますか?ブートストラップのデフォルトのナビゲーションバーのドロップダウンが動作しない
-3
A
答えて
0
jqueryとbootstrap js cdnsを次のようにファイルに添付する必要があります。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
0
あなたはブートストラップ作業を行うためのブートストラップJavaScriptを参照する前に、あなたはjQueryのへの参照を含める必要があります。そして、あなたはまた、body
要素内の既存のscript
要素を移動する必要があり、私は推測する:
</nav>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's a working fiddle、外部リソースは、HTMLコードの中に表示されていないにもかかわらず。あなたは上記の回答にaitionでWeb開発に慣れていたよう
0
私は追加したい2以上points--
No.1の あなたのページに二回のブートストラップのDNSを追加することはありません、それはすべて作成されます問題の種類。
2号
ブートストラップ動作させるためにjQueryのへの参照を含める必要があります、次のorder--
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
関連する問題
- 1. ブートストラップ4ドロップダウンが動作しない
- 2. ブートストラップのナビゲーションバーでドロップダウンが機能しない
- 3. ブートストラップ固定ナビゲーションバーの動作
- 4. モバイルでブートストラップのnavbarドロップダウンが動作しない
- 5. ブートストラップ4 alpha、navのドロップダウンが動作しない
- 6. IE8でブートストラップのドロップダウンが動作しない
- 7. 電子でブートストラップのドロップダウンが動作しない
- 8. ブートストラップは動作しない固定ナビゲーションバーの上にオフセットscrollspy
- 9. ブートストラップ3対応ドロップダウン・ホバー・メニューがモバイルで動作しない
- 10. Django Heroku - ドロップダウンがブートストラップで動作しない
- 11. Chromeで必要なブートストラップのドロップダウンが空の値で動作しない
- 12. ナビゲーションバーの外部URLがブートストラップで動作しません
- 13. ナビゲーションバーが正しく動作しない
- 14. ブートストラップのnavbarメニューが動作しない
- 15. ブートストラップbtnのホバーが動作しない
- 16. angular2のブートストラップ3が動作しない
- 17. ブートストラップnavbarドロップダウンが1ページのみで動作しません
- 18. Firefoxでの奇妙なブートストラップのドロップダウンの動作
- 19. ドロップダウンが動作していない
- 20. ブートストラップのナビゲーションバーは
- 21. Twitter Bootstrapドロップダウンが動作しない
- 22. Return False - リンクが動作しない - ドロップダウン
- 23. CSSドロップダウンがホバリングで動作しない
- 24. ドロップダウンが動作しないブートストラップピル
- 25. Zurb Foundation - ドロップダウンが動作しない
- 26. ブートストラップ内のデータテーブルのソートが動的データで動作しない
- 27. ブートストラップ3 - Ipadがナビゲーションバーの矢印/キャレットを表示しない
- 28. メディアストラテジーがブートストラップで動作しない
- 29. WildFly10でブートストラップが動作しない
- 30. ブートストラップw3schoolチュートリアルドロップダウンが動作しない
にCDN秒を追加します。 –
私は全く新しいWeb開発をしています...どうすればいいですか?タイ – pcantalupo