Klik butang untuk membuka menu lungsur

Question

Saya menggunakan bootstrap 5 cdn dan saya mahu membuka dropdown tanpa mengklik pada dropdown.

Saya menggunakan bar navigasi dan mahu memaparkan "pautan lungsur":

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="bendalir bekas">
    <a class="navbar-brand" href="#">Navbar</a>
    <butang
      class="navbar-toggler"
      type="butang"
      data-bs-toggle="runtuh"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="palsu"
      aria-label="Togol navigasi"
    >
      <span class="navbar-toggler-icon"></span>
    </butang>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active"aria-current="halaman""#">Laman Utama</a>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-togol"
            href="#"
            id="ujian"
            peranan="butang"
            data-bs-toggle="jatuh turun"
            aria-expanded="palsu"
          >
            Pautan jatuh turun
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Tindakan</a></li>
            <li><a class="dropdown-item" href="#">Satu lagi tindakan</a></li>
            <li><a class="dropdown-item" href="#">Sesuatu yang lain di sini</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<button class="btn btn-primary btn-sm" (klik)="open()">Abrir</button>

Dalam komponen saya cuba melakukan perkara berikut tetapi ia tidak berfungsi:

export class AppComponent {
  buka() {
    const dropdown = document.getElementById('test');
    dropdown.click();
  }
}

Saya melakukannya dalam stackblitz: test

Answer 1

Tambah atribut bootstrap pada butang:

<button
    class="btn btn-primary btn-sm"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown"
    aria-expanded="false"
    aria-label="Toggle navigation"
 >
     Abrir
</button>

Kod pautan: https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-77sj13?file=app/app.component.html

Walau bagaimanapun, ia akan berfungsi. Perlu diingat bahawa aplikasi sudut anda harus mengawal elemen ini, jadi mencampurkan perpustakaan luaran dengan perpustakaan rangka kerja (Angular, Vue, React) akan sentiasa menyebabkan masalah

Untuk kegunaan ini, terdapat pelaksanaan khas, contohnya: https://ng- bootstrap.github.io/#/home Panduan sudut

Pilihan lain ialah menggunakan ngIf untuk menunjukkan bar navigasi (tiada animasi secara lalai)

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