Saya memiliki halaman yang membuka sistem menu yang sangat standar ketika ditampilkan di layar yang lebih kecil. Jadi saya berasumsi bahwa Bootstrap sudah aktif dan berjalan dengan baik. Namun, setelah menu burger dibuka, tidak mungkin untuk melipatnya kembali dengan mengklik tombol lagi.

Saya belum dapat mereproduksi masalah ini, jadi saya mengunggahnya ke situs web Azure. Saya mendapatkan hasil yang sama berjalan secara lokal dan keduanya di FF dan Cr.

Googling tidak memberikan nilai apa pun. Satu-satunya hal yang saya perhatikan adalah jika saya mengklik untuk ketiga kalinya, tepat setelah klik kedua, ada kesalahan di konsol yang mengatakan bahwa runtuhnya sedang berlangsung. Jadi sepertinya JS sedang berjalan tetapi rendering tidak dapat membuat kelas yang diperbarui menjadi disembunyikan. mengeksekusi tugas kelas dari konsol memang menyembunyikan menu.

Aku kehabisan ide. Saran?

NB: ini Bootstrap 4 alpha 6 dan Angular 4.

Edit: Seperti yang diminta, markup bilah navigasi saya.

<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-sm">

  <button class="navbar-toggler navbar-toggler-right" type="button" 
          data-toggle="collapse" data-target="#collapsee">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Donkey</a>

  <div class="collapse navbar-collapse" id="collapsee">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>
0
Konrad Viltersten 15 Agustus 2017, 22:50

2 jawaban

Jawaban Terbaik

Mengubah div menu Anda menjadi ini bisa berhasil, dan menambahkan acara klik untuk tombol:

<button class="navbar-toggler navbar-toggler-right" (click)="toggleState()" type="button" 
          data-toggle="collapse" data-target="#collapsee">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" [ngClass]="{ 'show': isIn }">

Dan fungsi TypeScript: isIn = false; ....

toggleState() {
        const bool = this.isIn;
        this.isIn = bool === false ? true : false;
}
1
Kevin 16 Agustus 2017, 15:04

Coba perbarui Bootstrap v4.0.0-alpha.6 Anda ke Bootstrap 4.0.0-beta yang sudah dirilis sebelumnya dan tersedia di tautan ini Rilis v4.0.0-beta.

1
totallytotallyamazing 16 Agustus 2017, 14:47