引导下拉不起作用或不切换

我是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

引导下拉不起作用或不切换

回答

相关问题