ドロップダウンメニューが正しく動作しないナビゲーションバーがあるドキュメントがあります。私のcodepenで動作しますが、私のテキストエディタ(Sublime)では動作しません。私はすべての解決策を探してきたので、ここにいます。ブラウザで動作しないブートストラップのNavbarドロップダウンCodepen
私が試してみました:
-bootstrapドキュメントを
jQueryのスクリプトは、GoogleとStackOverflowの検索の
-Lots私のクロージャをチェック - トリプルブートストラップスクリプト
前であることを確認してください-Making。このコード-Adding
:
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
は、ここで私は、関連するコードであると信じるものです。私の間違いに対する洞察は非常に高く評価されます。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>JakobiArtWorks</title>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet">
<link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet">
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<header>
<!--nav-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">JAW</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#art">Art</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#wire">Wire</a>
<a class="dropdown-item" href="#clay">Clay</a>
<a class="dropdown-item" href="#plywood">Plywood</a>
<a class = "dropdown-item" href = "#concrete">Concrete</a>
</div>
</li>
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li><a href = "#">Contact</a></li>
</ul>
</div>
</nav>
<!--end nav-->
</header>
...
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src = "script.js"></script>
</body>
</html>
コンソールに誤りがありますか? – Nimish