Bootstrap Açılır menüsü çalışmıyor


101

Açılır menülerimi çalıştırmakta sorun yaşıyorum. Gezinme çubuğunun mükemmel bir şekilde görünmesini sağlayabilirim, ancak "Açılır" a tıkladığımda (her ikisi de) açılır menüyü göstermiyor. Bununla ilgili diğer gönderilere bakmayı denedim, ancak herkesin sorunlarını çözen hiçbir şey yardımcı olmadı. Kaynağı doğrudan bootstrap'in web sitesinden kopyaladım, ancak makinemde çalışmasını sağlayamıyorum. Herhangi bir fikri olan var mı? Bir saattir ona bakıyorum ve sorunun ne olduğunu anlayamıyorum.

<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 -->


1
Üzgünüm, bunu yazdığımda işte. Açıklamayı düzenledim.
user2540528

Bize bağlantıyı verebilir misin? @ user2540528
STP38

JS dosyasına bağlantı mı?
user2540528

1
Kodunuzu kopyaladım ve js / css ekledim ve makinemde çalışıyor
Chris

'Kaynağı doğrudan bootstrap web sitesinden kopyaladım' @ user2540528, bana bu bağlantıyı verebilir misin?
STP38

Yanıtlar:


142

Belki denerim

<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">

ve işe yarayıp yaramayacağını görün.


Bu yaptı. Yerel dosyaların çalışmaması için herhangi bir sebep var mı? Ve bu js kaynakları, bunu bir etki alanına doğru dağıtırsam? Bitirip yayınladıktan sonra uygulamamın hala çalıştığından emin olmak istiyorum. (Bu benim ilk, bu yüzden soruyorum)
user2540528

@ user2540528 Muhtemelen dosya o zaman farklı adlandırılmıştır jquery-1.11.0.jsveya dosya hiç yoktur.
Chris

user2540528 bootstrap.css'yi özlemiş gibisiniz
Avec

1
Benim sorunum, bootstrap.css'yi doğru yerde bulundurmamdı, ancak
paketime

Bu kod satırlarının sırasının da önemli olduğunu fark ettim. Google apis'i son kod satırı olarak koyarsanız, o zaman çalışmaz.
Efe Büyük

114

Bir bootstrap + rails projem vardı ve açılır menü iyi çalıştı. Bir güncellemeden sonra çalışmak için durdular ...

Sorunu çözen çözüm budur, aşağıdakileri .js dosyasına ekleyin:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

Bootstrap 3 ve Rails 4.2 ile yaşadığım, açılır listenin yalnızca ilk seferde çalıştığı, ancak ikinci tıklamada çalışmadığı bir sorunu çözdüm.
bovender

Spud CMS ile Grails projesi - Bu, açılır menü geçiş sorunumu çözdü.
Tyler Rafferty

Bunun için çok teşekkür ederim 1. herkes "jquery'yi bootstrap'tan önce ekle" diyor. ama öyleydi. Bu sadece, bir saatten fazla baktıktan sonra işe yarayan cevaplarıdır!
MaNTiS

1
Bu bana çok yardımcı oldu. Bu düzeltmenin neden gerekli olduğuna dair bir fikriniz var mı?
Brack

1
Bu çözüm benim için çalıştı. Önyüklemeyi sitemde iki kez içe aktardığım ortaya çıktı, yalnızca bir kez içe aktardıktan sonra bu çözümde düzeltme olmadan çalışmaya başladı.
harshpatel991

27

% 100 çalışan çözüm

Jquery bağlantınızı tüm js ve css bağlantılarından önce yerleştirin

Örnek Doğru

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

Örnek Yanlış!

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

Benim durumumda işe yaramadı. Iwan B.'nin çözümünü kullanmak zorundaydı.
Toddmo

1
@Nabin Çalışıyor çünkü bootstrap jquery kullanıyor
Siddaram H

@toddmo Çalışıyor, google crome dbugger'da networy sekmesinden jquery, bootstrap ve css'nin doğru şekilde yüklenmiş olup olmadığını kontrol edin
LMK

12

Jquery js bağlantısını bootstrap js bağlantısının önüne şu şekilde koyun:

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

onun yerine:

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

Put the jquery css ...>Put the jquery js ...
allcaps

2
Sözleriniz doğru ama kod blokları söylediklerinizin tam tersi.
Astra Bear

4

GetBootstrap.com'a göre, açılır menüler üçüncü taraf kitaplığı Popper.js üzerinde oluşturulmuştur. Dolayısıyla, açılır menü onclick çalışmıyorsa ancak yalnızca açılır menünün üzerine gelindiğinde çalışıyorsa, popper.js, bootstrap.js ve bootstrap.css'yi içerir. Popper.js'yi bootstrap paketlerini eklemeden dahil etmemek, nedenlerden biri olabilir.

<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/


1
Sürüm 4 için bu, projelerimize yalnızca Jquery ve bootstrap'ı dahil etmeye alıştığımızda büyük bir değişiklik olan cevaptır.
Vindic

1
Evet, sıra gerçekten önemli.
nikhilmeth

Benim için işe yarayan bu. Aynı kodlar Bootstrap sayfasından kopyalandı, ancak bu, girmeleri gereken doğru sıradır.
DuckRodgers

3

ASP .NET Formlarını kullanırken bununla karşılaştım. Kullandığım çözüm, jQuery ve Bootstrap referanslarını <asp:ScriptManager runat="server">ana sayfadan silmek veya yorumlamaktı . Görünüşe bakılırsa, .txt dosyasına koyduğunuz jQuery ve Bootstrap referanslarıyla bir çakışma yaratıyor <header>.


2

Hala aynı sorunla karşılaşan biri varsa, tüm jquery ve önyükleme dosyalarının yüklenip yüklenmediğini ve dosyanın yollarının doğru olup olmadığını kontrol etmek için tarayıcınızda Sayfa kaynağınızı kontrol ettiğinizden emin olun . En önemli! en son kararlı jquery dosyasını kullandığınızdan emin olun.


2

Belki dışarıdaki biri bundan yararlanabilir:

Özet (aka tl; dr)

Bootstrap Açılır menülerde yükseltme nedeniyle yayından bırakarak durdu django-bootstrap3sürümü 6.2.2için11.0.0 .

Arka fon

Biz bir miras benzer bir sorunla karşılaştı djangodayanır sitede bootstrapthroughdjango-bootstrap3 . Tesis her zaman iyi çalıştı ve üretimde bunu yapmaya devam etti, ancak yerel test sistemimizde değil. Kodda belirgin bir ilgili değişiklik yoktu, bu nedenle büyük olasılıkla bir bağımlılık sorunu vardı.

Semptomlar

Yerel django test sunucusundaki siteyi ziyaret ettiğinizde, ilk bakışta mükemmel bir şekilde tamam görünüyordu: stil / düzen kullanarakbootstrap navbar da dahil olmak üzere beklendiği gibi . Ancak, tüm açılır menüler açılamadı.

Tarayıcı konsolunda hata yok. Tüm statik dosyalar jsve cssdosyalar başarıyla yüklendi ve diğer paketlere dayanan işlevler jquerybeklendiği gibi çalışıyordu.

Çözüm

Bu ortaya çıktı django-bootstrap3, bizim yerel piton ortamında paket son sürüme yükseltilmiş 11.0.0sitesi inşa edilmiş, oysa kullanarak 6.2.2.

django-bootstrap3==6.2.2Tam olarak neyin neden olduğu hakkında hiçbir fikrim olmasa da, sorunu bizim için çözmek için geri dönüyorum .


1

Ray 4.0 kullanıyorum ve aynı problemle karşılaştım

İşte testi geçen çözümüm

Gemfile'a ekle

gem 'bootstrap-sass'

Çalıştırmak

bundle install

ardından app / assets / javascripts / application.js'ye ekleyin

//= require bootstrap

O zaman açılır menü çalışmalıdır

Bu arada, Chris'in çözümü de benim için çalışıyor.

Ama bence varlık hattı fikrine daha az uygun


0

Görünüşe göre Rails 4 için yapılacak daha çok şey var.

  1. İçinize Gemfile ekleyin.

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

burada görüldüğü gibi

  1. Sonra koşman gerek

    $ paket yükleme

Bu kimsenin bahsetmediği kısım

Config / application.rb dosyasını açın

  1. bunu ikinciden son sona kadar ekleyin

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

burada görüldüğü gibi sayfanın yaklaşık% 20'si.

  1. Sonra bu dizinde bir custom.css.scss dosyası oluşturun

    uygulama / varlıklar / stil sayfaları

yukarıdaki görevden biraz daha aşağıda görüldüğü gibi

  1. Bu dosyanın içinde şunları içerir:

    @import "bootstrap";


Şimdi sunucunuzu durdurun ve yeniden başlatın ve her şey yolunda gitmeli.

Bir mücevher kullanmadan bootstrap'i çalıştırmayı denedim ama benim için işe yaramadı.

Umarım bu birine yardım eder!



0

Benim durumumda, Chrome Uzantılarını devre dışı bırakmak sorunu çözdü. Suçluyu bulana kadar onları Chrome'dan tek tek kaldırdım.

Sorun teşkil eden Chrome uzantısının yazarı olduğum için, uzantıyı daha iyi düzeltelim sanırım!


0

Bootstrap sürümüm bootstap4-alpha'yı gösteriyordu,

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

4-beta olarak değiştirildi

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

ve çalışmaya başladı


0

sorun href'in href = "#" olması, href = "#" i tüm etiketlerde kaldırmanız gerekir


0

Bootstrap 4 için ek bir kitaplığa ihtiyacınız var. Tarayıcı konsolunuzu okursanız, Bootstrap aslında açılır pencerenin çalışması için ihtiyacınız olduğunu söyleyen bir hata mesajı yazdıracaktır.

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

0

açısal projelerde angular-cli.json veya angular.json tez satırları ekleriz:

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

  ],

0

Yukarıdaki cevapların hepsini denedim ve benim için çalışan tek versiyon jquery 1.11.1 . Diğer tüm 1.3.2, 1.4.4, 1.8.2, 3.3.1 sürümleriyle denedim ve navbar açılır menüsü çalışmıyor.

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

0

Ruby on Rails'de sorunla karşılaşırsanız kapsamlı çözüm Bootstrap Ruby Gem benioku dosyası tarafından sağlanır .

veya kısaca:

  1. adlandırmak application.cssiçinapplication.scss
  2. Ekle @import "bootstrap";
  3. eklemek gem 'jquery-rails'içinGemfile onun var sürece.
  4. Ekle //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets için application.js.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.