ハンバーガーのメニュー項目がデータトグルで表示されない。

私は角度とブートストラップの両方を学んでいる。これらを組み合わせるために、作業中のHTMLコンテンツをAngularコンポーネントにコピーしようとしました。ただし、一部の機能はまだ動作しません。ハンバーガーメニューアイコンをクリックすると、何も表示されず、ナビゲーションバーの項目は表示されません。この 'データトグル'機能はjqueryで動作するようですので、このためにスクリプトをインポートしようとしました。ハンバーガーのメニュー項目がデータトグルで表示されない。

ここにデータトグラー 'はコード：

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation"> &#9776; </button> 

<div class="collapse navbar-toggleable-xs" id="navigation"> ... </div>

私はjQueryのスクリプトをインポートしようとしたの下に。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

これは全体のコンポーネントです：ボタンが押されたときに、リストの項目が表示されていない理由を

app.component.html

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
    <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'> 
    </head> 

<body> 
    <nav class="navbar navbar-fixed-top"> 

    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation"> 
    &#9776; 
    </button> 

    <div class="collapse navbar-toggleable-xs" id="navigation"> 
    <ul class="nav navbar-nav float-sm-right"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#social">CONNECT</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#who">WHO</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#work">WORK</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#why">WHY</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#customers">CUSTOMERS</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#pricing">PRICING</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#contact">CONTACT</a> 
     </li> 
    </ul> 
    </div> 

</nav> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script> 
</body> 

</html>

は、誰も知っています？

出典

2017-04-26 Klyner

詳細を調べることなく、AngularとjQueryを混在させないことを強くお勧めします。これはすべてmessing things upが始まったからです。

You can either use materialこの種のナビゲーションを構築するにはBootstrap components written in pure AngularJS by the AngularUI Teamを使用してください。他の2つに満足できない場合は、Semantic UI Angular Integrations Repositoryもあります。

出典

2017-04-26 14:39:26 dschu

ハンバーガーのメニュー項目がデータトグルで表示されない。

答えて

関連する問題