ドロップダウンボタンが期待通りに機能します。

私はHTMLとAngularを初めて使用しています。これは簡単な基本的な質問かもしれません。基本的なドロップダウンボタンを使用しようとしています。この例では、ドロップダウンボタンが期待通りに機能します。

http://jsfiddle.net/xkL15guj/

私はplunkrで同じ例を使用しようとしています。しかし、bootstrap.min.jsファイルを追加しようとしているときに、追加できません。私がここで何をしているのか理解できますか？

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

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

ありがとうございました。

出典

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（man-in-the-middle）攻撃に対して開かれます。ユーザーがHTTPSを介して配信されるページを訪問すると、Webサーバーとの接続はSSLで認証され、暗号化されるため、盗聴者やMITM攻撃から保護されます。

ただし、HTTPSページにHTTPコンテンツが含まれている場合、HTTPSを介してメインページが配信されていても、攻撃者はHTTP部分を読み取りまたは変更できます。 HTTPSページにHTTPコンテンツがある場合、そのコンテンツを「混在」と呼びます。ユーザーが訪問しているWebページは、一部のコンテンツが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

ドロップダウンボタンが期待通りに機能します。

答えて

関連する問題