クリック後にブートストラップのドロップダウンメニューが開かない

Question

私はAngular-cliから生成された新しいAngular 2プロジェクトでこのコードを実行しています。しかし、ボタンをクリックするとドロップダウンメニューが表示されません。

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <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 role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Answer 1

ドロップダウン動作のために必要とされるbootstrap.jsファイルをロードする必要があります（jqueryのも、その前にロードされました） ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <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 role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 2

あなたのindex.html内の2つのスクリプトの下に追加してみてください：

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>