Question

我真的不明白，当我在本地启动我的html页面时，下拉菜单不起作用。

我尝试在bootply上复制/粘贴我的html代码及其工作！难以置信......

http://bootply.com/90610

有什么想法吗？

我不想包含所有js文件，只需要下拉列表所需的文件（dropdown.js）

我真的不知道应该尝试什么...

如果有人可以帮助我，我会非常感激。

谢谢

Answer 1

当你将它放在你自己的HTML页面（3.3.7 are not compatible with JQuery 3.X之前的Bootstrap版本）中时，你必须包含jQuery 1.X或2.X.确保在 bootstrap.js（或dropdown.js）之前包含jquery.js 。通常在</body>标记之前执行此操作。

这是一个完整的工作示例，Bootstrap和jQuery是从外部CDN加载的：

<html> <head> <title>Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body>  <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div>  </div> </div>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html>

将其放入.html文件并在浏览器中打开。

Answer 2

我的工作方式首先

npm install --save bootstrap @ 3

这将为css和js创建所有bootsrap dirs

然后我在我的项目/projectname/angular.json中全局添加了

添加了以下几行以添加CSS和js

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/bootstrap/dist/js/npm.js"
        ]

确保您的index.html文件不会直接导入任何冲突的.js文件

Answer 3

至少对我来说，以上所有都没有解决问题。升级到v3.2.0的bootstrap就可以了。这是一个自包含的示例代码。只需复制粘贴到测试html文件，它应该工作（所有js和CSS都是cdn加载）：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">    </script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>


</head>
<body>

<div class="btn-group"> 
  <button id="myid" type="button" class="btn btn-default dropdown-toggle" data-    toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</body>
</html>

Bootstrap 3下拉列表无法正常工作

3 个答案: