Menu Dropdown Bootstrap tidak berfungsi

100

Saya mengalami masalah saat menjalankan tarik-turun saya. Saya bisa membuat bilah navigasi ditampilkan dengan sempurna, tetapi ketika saya mengeklik "Dropdown" (salah satunya), menu tarik-turun tidak ditampilkan. Saya telah mencoba melihat posting lain tentang ini, tetapi tidak ada yang memperbaiki masalah semua orang yang membantu. Saya menyalin sumber langsung dari situs web bootstrap, tetapi sepertinya saya tidak dapat membuatnya berfungsi di komputer saya. Ada yang punya ide? Saya telah menatapnya selama satu jam dan sepertinya tidak tahu apa masalahnya.

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <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 class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

javascript jquery html css twitter-bootstrap pengguna2540528
sumber
1
Maaf, di tempat kerja saat saya menulis ini. Saya mengedit penjelasannya.
pengguna2540528
Bisakah Anda memberi kami tautannya? @ user2540528
STP38
Link ke file JS?
pengguna2540528
1
Saya baru saja menyalin kode Anda dan menambahkan js / css dan berfungsi di mesin saya
Chris
'Saya menyalin sumber langsung dari situs web bootstrap' @ user2540528, Bisakah Anda memberi saya tautan itu?
STP38

Jawaban:

142

Mungkin coba dengan 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

dan lihat apakah itu akan berhasil.

Chris
sumber
Ini berhasil. Ada alasan mengapa file lokal tidak berfungsi? Dan sumber js ini jika saya menerapkan ini di domain, benar? Hanya ingin memastikan aplikasi saya masih berfungsi setelah saya menyelesaikannya dan memublikasikannya. (Ini yang pertama bagi saya, jadi itulah mengapa saya bertanya)
user2540528
@ user2540528 Mungkin nama file berbeda jquery-1.11.0.jsatau tidak ada sama sekali.
Chris
user2540528 Sepertinya Anda melewatkan bootstrap.css
Avec
1
Masalah saya adalah saya memiliki bootstrap.css di tempat yang benar tetapi tidak memiliki bootstrap.min.js yang disertakan dalam bundel saya
codingNightmares
Saya menyadari bahwa urutan baris kode itu juga penting. Jika Anda menempatkan google apis sebagai baris kode terakhir, maka itu tidak berfungsi.
Efe Büyük
114

Saya memiliki proyek bootstrap + rel, dan dropdown berfungsi dengan baik. Mereka berhenti bekerja setelah pembaruan ...

Ini adalah solusi yang memperbaiki masalah, tambahkan yang berikut ini ke file .js:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
sumber
Memecahkan masalah yang saya alami dengan Bootstrap 3 dan Rails 4.2 di mana dropdown hanya akan berfungsi pertama kali, tetapi tidak pada klik kedua.
bovender
Proyek Grails w / Spud CMS - Ini memecahkan masalah sakelar drop-down saya.
Tyler Rafferty
terima kasih banyak untuk 1. semua orang mengatakan "tambahkan jquery sebelum bootstrap". tapi memang seperti itu. Ini adalah satu-satunya jawaban, setelah lebih dari satu jam melihat, itu berhasil!
MaNTiS
1
Ini sangat membantu saya. Tahu mengapa perbaikan ini diperlukan?
Brack
1
Solusi ini berhasil untuk saya. Ternyata saya telah mengimpor bootstrap di situs saya dua kali, setelah saya mengimpornya hanya sekali, itu mulai berfungsi tanpa perbaikan dalam solusi ini.
harshpatel991
27

Solusi kerja 100%

tempatkan saja tautan Jquery Anda terlebih dahulu dari semua tautan js dan css

Contoh Benar 

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

Contoh Salah!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Hidayat ullah
sumber
Tidak berhasil dalam kasus saya. Harus menggunakan solusi Iwan B.
toddmo
1
@Nabin Berhasil karena, kita harus memuat jquery terlebih dahulu dan kemudian bootstrap, karena bootstrap menggunakan jquery
Siddaram H
@toddmo Berhasil, cukup periksa jquery, bootstrap dan css dimuat dengan benar atau tidak dari tab networy di google crome dbugger
LMK
12

Letakkan link jquery js sebelum link bootstrap js seperti ini:

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

dari pada:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Seyibabs
sumber
Put the jquery css ...>Put the jquery js ...
allcaps
2
Kata-kata Anda benar tetapi blok kodenya berlawanan dengan apa yang Anda katakan.
Astra Bear
4

Menurut getBootstrap.com, dropdown dibangun di perpustakaan pihak ketiga Popper.js. Jadi, jika menu dropdown tidak berfungsi di klik tetapi hanya berfungsi di hover dropdown termasuk popper.js, bootstrap.js dan bootstrap.css. Tidak menyertakan popper.js sebelum menyertakan bundel bootstrap bisa menjadi salah satu alasannya.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/

nikhilmeth.dll
sumber
1
Untuk versi 4 ini adalah jawaban yang merupakan perubahan besar ketika kita terbiasa hanya memasukkan Jquery dan bootstrap dalam proyek kita.
Vindic
1
Ya, urutannya sangat penting.
nikhilmeth
Ini yang berhasil untuk saya. Menyalin kode yang sama dari halaman Bootstrap, tetapi ini adalah urutan yang benar seharusnya.
DuckRodgers
3

Saya menghadapi ini ketika saya menggunakan ASP .NET Forms. Solusi yang saya gunakan adalah menghapus atau mengomentari referensi jQuery dan Bootstrap dari <asp:ScriptManager runat="server">dalam halaman master. Tampaknya itu menciptakan konflik dengan referensi jQuery dan Bootstrap yang Anda masukkan ke file <header>.

Mohammad AlShaabi
sumber
2

Jika ada yang masih menghadapi masalah yang sama, pastikan untuk memeriksa sumber halaman tampilan Anda di browser Anda untuk memeriksa apakah semua file jquery dan bootstrap dimuat dan jalur ke file tersebut sudah benar. Yang terpenting! pastikan untuk menggunakan file jquery stable terbaru.

Munam Yousuf
sumber
2

Mungkin seseorang di luar sana bisa mendapatkan keuntungan dari ini:

Ringkasan (alias tl; dr)

Dropdown bootstrap berhenti drop-down karena peningkatan dari django-bootstrap3versi 6.2.2ke 11.0.0.

Latar Belakang

Kami mengalami masalah serupa di djangositus lama yang sangat bergantung pada bootstrapthrough django-bootstrap3. Situs ini selalu berfungsi dengan baik, dan terus melakukannya dalam produksi, tetapi tidak pada sistem pengujian lokal kami. Tidak ada perubahan terkait yang jelas dalam kode, jadi kemungkinan besar masalah ketergantungan.

Gejala

Ketika mengunjungi situs pada server pengujian django lokal , sekilas terlihat oke-oke saja: style / layout menggunakan bootstrapseperti yang diharapkan, termasuk navbar. Namun, semua menu dropdown gagal drop down.

Tidak ada kesalahan di konsol browser. Semua statis jsdan cssfile berhasil dimuat, dan fungsionalitas dari paket lain yang mengandalkan jqueryberfungsi seperti yang diharapkan.

Larutan

Ternyata django-bootstrap3paket di lingkungan python lokal kami telah diupgrade ke versi terbaru 11.0.0, sedangkan situs dibuat menggunakan 6.2.2.

Mengembalikan untuk django-bootstrap3==6.2.2memecahkan masalah bagi kami, meskipun saya tidak tahu persis apa penyebabnya.

djvg
sumber
1

Saya menggunakan rel 4.0 dan mengalami masalah yang sama

Inilah solusi saya yang lulus uji

tambahkan ke Gemfile

gem 'bootstrap-sass'

Lari

bundle install

lalu tambahkan ke app / assets / javascripts / application.js

//= require bootstrap

Maka dropdown seharusnya berfungsi

Omong-omong, solusi Chris juga berhasil untuk saya.

Tapi menurut saya itu kurang sesuai dengan ide jalur aset

pengguna1143669
sumber
0

Sepertinya masih banyak yang harus dilakukan untuk Rails 4.

  1. Di dalam Anda, Gemfile menambahkan.

    permata 'bootstrap-sass', '~> 3.2.0.2'

seperti yang terlihat di sini

  1. Selanjutnya Anda harus lari

    $ bundle install

Ini adalah bagian yang belum disebutkan siapa pun

Buka file config / application.rb Anda

  1. tambahkan ini tepat sebelum detik hingga akhir terakhir

    config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)

seperti yang terlihat di sini sekitar 20% di bawah halaman.

  1. Selanjutnya buat file custom.css.scss di direktori ini

    app / assets / stylesheets

seperti yang terlihat di sini sedikit lebih jauh dari tugas di atas

  1. Di dalam file itu termasuk

    @ort "boot";

Sekarang hentikan server Anda dan mulai ulang dan semuanya akan berfungsi dengan baik.

Saya mencoba menjalankan bootstrap tanpa menggunakan permata tetapi tidak berhasil untuk saya.

Harapan yang membantu seseorang keluar!

Wes Duff
sumber
0

Saya pikir itu masalah rute file rute Anda. Bukan bootstrap atau file JQuery.

Alvian Casablancas
sumber
0

Dalam kasus saya, menonaktifkan Ekstensi Chrome memperbaikinya. Saya menghapusnya dari Chrome satu per satu sampai saya menemukan pelakunya.

Karena saya adalah pembuat ekstensi Chrome yang melanggar, saya rasa sebaiknya saya memperbaiki ekstensi tersebut!

toddmo
sumber
0

Versi bootstrap saya mengarah ke bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

diubah menjadi 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

dan itu mulai bekerja

Siddaram H.
sumber
0

masalahnya adalah href = "#" Anda harus menghapus href = "#" di semua tag

Victor Jimenez
sumber
0

Untuk Bootstrap 4 Anda memerlukan perpustakaan tambahan. Jika Anda membaca konsol browser Anda, Bootstrap akan benar-benar mencetak pesan kesalahan yang memberi tahu Anda bahwa Anda membutuhkannya agar drop down berfungsi.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
luskbo
sumber
0

dalam proyek sudut kami menambahkan baris tesis angular-cli.json atau angular.json:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],
ATEF CHAREF
sumber
0

Saya mencoba semua jawaban di atas dan satu-satunya versi yang bekerja untuk saya adalah jquery 1.11.1 . Saya mencoba dengan semua versi 1.3.2, 1.4.4, 1.8.2, 3.3.1 dan dropdown navbar tidak berfungsi.

<script src="jquery/jquery-1.11.1.min.js"></script>
Zeke
sumber
0

Jika Anda menghadapi masalah di Ruby on Rails , solusi lengkap disediakan oleh file readme Bootstrap Ruby Gem .

atau singkatnya:

  1. ganti nama application.cssmenjadiapplication.scss
  2. Menambahkan @import "bootstrap";
  3. tambahkan gem 'jquery-rails'ke Gemfilekecuali itu ada.
  4. tambahkan //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets ke application.js.
Esmaeil MIRZAEE
sumber