下拉按钮按预期工作。

我是HTML和Angular的新手。这可能是一个简单的基本问题。我正在尝试使用基本的下拉按钮。在这个例子中。下拉按钮按预期工作。

http://jsfiddle.net/xkL15guj/

我想在plunkr中使用相同的示例。但是，当我试图添加文件bootstrap.min.js时，我无法添加。你能帮我理解我在这里做了什么错误吗？

https://plnkr.co/edit/YfgD9G?

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-danger">Action</button> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
 
    <span class="caret"></span> 
 
    <span class="sr-only">Toggle Dropdown</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>

谢谢。

来源

2016-04-14 Sailoosha

要添加您需要添加的jQuery引导：

当我看着你plunker的调整，你需要在你的脚本的顶部进行呼叫（前角）：

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

和

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

我这里有一个plunker例如：https://plnkr.co/edit/Kpy4s0RdFFu5hqgnKm9h?p=preview

另请注意，您引用的引导PNG是“阻止加载混合活动内容”

混合活动内容现在在Firefox 23中默认被阻止！

什么是混合内容？

当用户访问通过HTTP提供的页面时，他们的连接对于窃听和中间人（MITM）攻击是开放的。当用户访问通过HTTPS提供的页面时，它们与Web服务器的连接将通过SSL进行身份验证和加密，因此可以防止窃听者和MITM攻击。

但是，如果HTTPS页面包含HTTP内容，即使通过HTTPS提供主页面，攻击者也可以读取或修改HTTP部分。当HTTPS页面包含HTTP内容时，我们称该内容为“混合”。用户正在访问的网页只是部分加密的，因为其中一些内容是通过HTTP未加密检索的。混合内容阻止程序会阻止HTTPS页面上的某些HTTP请求。

要禁用禁止混合内容：

如果你需要允许要显示的混合内容，你能做到这一点很容易：

点击盾牌图标混合内容盾在地址栏并从下拉菜单中选择“在此页面上禁用保护”。

地址栏中的图标将更改为橙色警告三角形警告标识图标以提醒您正在显示不安全的内容。

要恢复之前的操作（重新阻止混合内容），只需重新加载页面即可。

来源

2016-04-14 14:00:24 TonyG

这是因为您没有将bootstrap.js文件和jQuery.js文件添加到您的应用程序中。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link data-require="[email protected]*" data-semver="3.2.1" rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" /> 
 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script> 
 
    <script data-require="[email protected]*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class="btn-group"> 
 
    <button type="button" class="btn btn-danger">Action</button> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
 
     <span class="caret"></span> 
 
     <span class="sr-only">Toggle Dropdown</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>

来源

2016-04-14 14:01:20

下拉按钮按预期工作。

回答

相关问题