2017-03-02 9 views
0

私はどこにでも見ましたが、私の解決策に対する答えを見つけることができないようです。私は自分のウェブサイトのためにnavbarを作る方法についてのチュートリアルに従っており、私はそれをモバイルフレンドリーにしようとしています。ナビゲーションバーに小さなデバイスのメニューを折りたたむボタンを表示したい。しかし、jQueryを追加しても、まだメニューが開きません。ブートストラップドロップダウンで解体されないメニュー

ここに私のコードがあります。うまくいけば、私は見落としている単純な修正です。事前に助けを

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <!-- Logo --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="#" class="navbar-brand">Test</a> 
 
     </div> 
 

 
     <!-- Menu Items --> 
 
     <div class="collapse navbar-collapse" id="mainNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> </li> 
 
       <li><a href="#">About</a> </li> 
 
       <li><a href="#">Contact</a> </li> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
</body> 
 

 
</html>

ありがとう!

答えて

1

のみdata-target="mainNavbar"data-target="#mainNavbar"

更新するために、1行を置き換え更新のみ

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar"> 

<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <!-- Logo --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="#" class="navbar-brand">Test</a> 
 
     </div> 
 

 
     <!-- Menu Items --> 
 
     <div class="collapse navbar-collapse" id="mainNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> </li> 
 
       <li><a href="#">About</a> </li> 
 
       <li><a href="#">Contact</a> </li> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

+0

私はチュートリアルの一部を見逃しました-_ ...ダムの間違いですが、あなたはそれをキャッチしました!助けてくれてありがとう! – LJP1203

+0

ようこそ@ LJP1203 –

0

あなたのボタンに間違いがあります。 #あなたのデータターゲット属性に#を入れるのを忘れてしまった。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
+0

@ LJP1203なぜあなたは私に投票しましたか? –

+0

あなたの答えが真であるため、私は+1します。 –

関連する問題