1. ホーム
  2. 質問と答え
  3. ブートストラップのドロップダウンが機能していないか、切り替えられていません

ブートストラップのドロップダウンが機能していないか、切り替えられていません

2016-08-22 7 views
0

ブートストラップを初めて使用しています。私のドロップダウンやトグル作業をすることができないので、このコードで何が間違っているか教えてください。ありがとうございました。ブートストラップのドロップダウンが機能していないか、切り替えられていません

<!DOCTYPE html> 
<html> 
<head> 
    <title>Red Stone One Stop Shop</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " /> 
    <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no"> 
    <script src="https://ajax.googleapis.com/libs/jquery/2.1.3/jquery.min.js"> 
    </script> 
    <script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <a href="/ecommerce/index.php" class="navbar-brand">Red Stone One Stop Shop</a> 
     <ul class="nav navbar-nav"> 
      <!-- Dropdown menu --> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Shirts</a></li> 
        <li><a href="#">Pants</a></li> 
        <li><a href="#">Shoes</a></li> 
        <li><a href="#">Accessories</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</nav> 
</body> 
</html>

出典

2016-08-22 Ibanez1408

答えて

1

最初にするべきことは、ブートストラップのウェブサイトから公式Boiler Templateを入手することです。それは物事を楽にします。そしてあなたが望むように変更を行います。 JSBin

しかし、あなたのコード内の問題があなたのjQueryのバージョンが古いということですが、ちょうどバージョンに更新します。

以下の例を参照してください、

<!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>Red Stone One Stop Shop</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="css/main.css" /> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <a href="/ecommerce/index.php" class="navbar-brand">Red Stone One Stop Shop</a> 
      <ul class="nav navbar-nav"> 
      <!-- Dropdown menu --> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Shirts</a></li> 
        <li><a href="#">Pants</a></li> 
        <li><a href="#">Shoes</a></li> 
        <li><a href="#">Accessories</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
    </nav> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

は作業例を確認してください,https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.jsのようになります。私はあなたがjQueryのバージョン更新した後、実施例を参照してくださいブートストラップバージョン3.xxの

を使用していると信じているので：JSBin

出典

2016-08-22 10:51:41

-1

例をJSBin hereで実行しても正しく動作します。

使用していたjQueryのバージョンが古すぎると思われます。

変更この：このため

<script src="https://ajax.googleapis.com/libs/jquery/2.1.3/jquery.min.js">

：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

はそれがお役に立てば幸いです。

出典

2016-08-22 10:48:43 charly3p

+0

はいチャーリーを、私はJSFiddleでそれを試してみましたが、それは同様jquery.min.jsを更新works.Iジェラードはそれを示唆し、それは働いた。ありがとうございました。 – Ibanez1408

+0

元の例と比較して何が間違っていたのか、質問自体で尋ねましたが、あなたは詳しく説明できますか？ – Farside

+0

あなたはこのことを申し訳ありません。私は私の答えを編集する！ – charly3p

関連する問題

 関連する問題