引導下拉不起作用或不切換

我是Bootstrap的新手。請告訴我這段代碼有什麼問題，因爲我似乎無法完成我的下拉菜單或切換工作。謝謝。引導下拉不起作用或不切換

<!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

你應該做的第一件事是從bootstrap網站獲得官方Boiler Template。這會讓事情變得更容易。並根據需要進行更改。

參見下面的例子中，

<!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>

檢查工作示例：JSBin

但在你的代碼的問題是，你的jQuery的版本是舊的，只是將其更新到版本如,https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js。因爲我相信你正在使用的引導3.xx版

見更新jQuery的版本後，該工作例子：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

是查理，我想它在的jsfiddle並works.I更新jquery.min.js爲傑拉德建議，它的工作。謝謝。 – Ibanez1408

因此，與問題本身問的原始示例相比，哪裏出了問題？能否詳細說明一下？ – Farside

你是對的託比對不起。我編輯我的答案！ – charly3p

引導下拉不起作用或不切換

回答

相關問題