ボタンをクリックしてドロップダウン メニューを開きます

Question

<p>ブートストラップ 5 cdn を使用していますが、ドロップダウンをクリックせずにドロップダウンを開きたいと考えています。 </p> <p>ナビゲーション バーを使用しており、「ドロップダウン リンク」を表示したいと考えています: </p> <pre class="brush:php;toolbar:false;"><nav class="navbar navbar-expand-sm navbar-light bg-light"> <div class="コンテナ-液体"> <a class="navbar-brand" href="#">ナビゲーションバー</a> <ボタン class="navbar-toggler" type=「ボタン」 data-bs-toggle="折りたたむ" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="ナビゲーションを切り替え" > <span class="navbar-toggler-icon"<</span> </ボタン> <div class="navbar を折りたたむ-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">ホーム</a> </li> <li class="ナビゲーション項目ドロップダウン"> ドロップダウンリンク </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">アクション</a></li> <li><a class="dropdown-item" href="#">別のアクション</a></li> <li><a class="dropdown-item" href="#">ここに他のもの</a></li> </ul> </li> </ul> </div> </div> </ナビ> <button class="btn btn-primary btn-sm" (click)="open()">Abrir</button></pre> <p>コンポーネントで次のことを実行しようとしましたが、うまくいきません: </p> <pre class="brush:php;toolbar:false;">export class AppComponent { 開ける（） { const ドロップダウン = document.getElementById('test'); ドロップダウン.クリック(); } }</pre> <p>私は stackblitz:test でそれを行いました</p>

Answer 1

ボタンにブートストラップ属性を追加:

リーリー

リンク コード: https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-77sj13?file=app/app.component.html

ただし、うまくいきます。 Angular アプリケーションはこれらの要素を制御する必要があるため、外部ライブラリとフレームワーク ライブラリ (Angular、Vue、React) を混在させると常に問題が発生することに注意してください。

この目的のために、次のような特別な実装があります:

https://ng-bootstrap.github.io/#/home 角度ガイド

もう 1 つのオプションは、ngIf を使用してナビゲーション バーを表示することです (デフォルトではアニメーションなし)

別のリンク:

https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-hygpzq?file=app/app.component.html