เมนู Bootstrap Dropdown ไม่ทำงาน


100

ฉันมีปัญหาในการทำให้ดรอปดาวน์ทำงาน ฉันสามารถทำให้แถบนำทางปรากฏขึ้นอย่างสมบูรณ์แบบ แต่เมื่อฉันคลิกที่ "ดร็อปดาวน์" (อย่างใดอย่างหนึ่ง) มันไม่แสดงเมนูแบบเลื่อนลง ฉันได้ลองค้นหาโพสต์อื่น ๆ เกี่ยวกับเรื่องนี้ แต่ไม่มีอะไรที่ช่วยแก้ปัญหาของทุกคนได้ ฉันคัดลอกแหล่งที่มาโดยตรงจากเว็บไซต์ของ bootstrap แต่ดูเหมือนจะไม่สามารถใช้งานได้กับเครื่องของฉัน ใครมีไอเดียบ้าง ฉันจ้องมองมันเป็นเวลาหนึ่งชั่วโมงแล้วและดูเหมือนจะคิดไม่ออกว่าปัญหาคืออะไร

<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
ขอโทษที่ทำงานเมื่อฉันเขียนสิ่งนี้ ฉันแก้ไขคำอธิบาย
user2540528

คุณช่วยให้ลิงค์ได้หรือไม่? @ user2540528
STP38

ลิงก์ไปยังไฟล์ JS?
user2540528

1
ฉันเพิ่งคัดลอกรหัสของคุณและเพิ่ม js / css และมันใช้งานได้บนเครื่องของฉัน
Chris

'ฉันคัดลอกแหล่งที่มาโดยตรงจากเว็บไซต์ของ bootstrap' @ user2540528 คุณช่วยให้ลิงค์นั้นได้ไหม
STP38

คำตอบ:


142

อาจจะลองด้วย

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

และดูว่าจะใช้งานได้หรือไม่


สิ่งนี้ทำได้ สาเหตุใดที่ไฟล์ในเครื่องไม่ทำงาน และแหล่ง js เหล่านี้ถ้าฉันปรับใช้สิ่งนี้บนโดเมนถูกต้องหรือไม่ แค่ต้องการตรวจสอบให้แน่ใจว่าแอปของฉันยังใช้งานได้หลังจากที่ฉันทำเสร็จและเผยแพร่แล้ว (เป็นคนแรกของฉันดังนั้นฉันจึงถาม)
user2540528

@ user2540528 อาจเป็นไฟล์ที่มีชื่อต่างกันjquery-1.11.0.jsหรือไม่มีเลย
คริส

user2540528 ดูเหมือนคุณจะพลาด bootstrap.css
Avec

1
ปัญหาของฉันคือฉันมี bootstrap.css ในตำแหน่งที่ถูกต้อง แต่ไม่มี bootstrap.min.js รวมอยู่ในชุดของฉัน
codingNightmares

ฉันตระหนักว่าลำดับของบรรทัดรหัสเหล่านั้นก็สำคัญเช่นกัน หากคุณใส่ google apis เป็นบรรทัดสุดท้ายของโค้ดมันจะไม่ทำงาน
Efe Büyük

114

ฉันมีโครงการ bootstrap + ทางรถไฟและดรอปดาวน์ทำงานได้ดี พวกเขาหยุดทำงานหลังจากการอัปเดต ...

นี่คือวิธีแก้ปัญหาที่แก้ไขปัญหาเพิ่มสิ่งต่อไปนี้ในไฟล์. js:

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

แก้ไขปัญหาที่ฉันมีกับ Bootstrap 3 และ Rails 4.2 โดยที่ดร็อปดาวน์จะใช้งานได้ในครั้งแรกเท่านั้น แต่ไม่ใช่ในการคลิกครั้งที่สอง
bovender

โครงการ Grails พร้อม Spud CMS - สิ่งนี้ช่วยแก้ปัญหาการสลับแบบเลื่อนลงของฉัน
Tyler Rafferty

ขอบคุณมากสำหรับ 1. ทุกคนพูดว่า "เพิ่ม jquery ก่อน bootstrap" แต่มันก็เป็นเช่นนั้น นี่คือคำตอบเพียงคำตอบหลังจากใช้เวลาค้นหานานกว่าหนึ่งชั่วโมง!
MaNTiS

1
สิ่งนี้ช่วยฉันอย่างมาก มีความคิดว่าทำไมจึงต้องมีการแก้ไขนี้
Brack

1
วิธีนี้ใช้ได้ผลสำหรับฉัน ปรากฎว่าฉันได้นำเข้า bootstrap บนไซต์ของฉันสองครั้งหลังจากที่ฉันนำเข้าเพียงครั้งเดียวมันก็เริ่มทำงานโดยไม่มีการแก้ไขในโซลูชันนี้
roughpatel991

27

โซลูชันการทำงาน 100%

เพียงวางลิงค์ Jquery ของคุณก่อนจากลิงค์ js และ css ทั้งหมด

ตัวอย่างถูกต้อง

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

ตัวอย่างผิด!

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

ไม่ได้ผลในกรณีของฉัน ต้องใช้วิธีแก้ปัญหาของ Iwan B.
Toddmo

1
@Nabin ใช้งานได้เพราะเราต้องโหลด jquery ก่อนแล้วจึง bootstrap เนื่องจาก bootstrap ใช้ jquery
Siddaram H

@toddmo ใช้งานได้เพียงตรวจสอบ jquery, bootstrap และ css ที่โหลดถูกต้องหรือไม่จากแท็บ networy ใน google crome dbugger
LMK

12

วางลิงค์ jquery js ก่อนลิงค์ bootstrap js ดังนี้:

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

แทน:

<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
คำพูดของคุณถูกต้อง แต่บล็อคโค้ดจะตรงข้ามกับที่คุณพูด
Astra Bear

4

ตาม getBootstrap.com ดรอปดาวน์ถูกสร้างขึ้นจากไลบรารีของบุคคลที่สาม Popper.js ดังนั้นหากเมนูแบบเลื่อนลงไม่ทำงานคลิก แต่ใช้งานได้เฉพาะเมื่อวางเมาส์เหนือเมนูแบบเลื่อนลง ได้แก่ popper.js, bootstrap.js และ bootstrap.css การไม่รวม popper.js ก่อนที่จะรวมบันเดิล bootstrap อาจเป็นสาเหตุหนึ่ง

<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
สำหรับเวอร์ชัน 4 นี่คือคำตอบซึ่งเป็นการเปลี่ยนแปลงครั้งใหญ่เมื่อเราใช้เฉพาะ Jquery และ bootstrap ในโปรเจ็กต์ของเรา
Vindic

1
ใช่คำสั่งมีความสำคัญจริงๆ
nikhilmeth

นี่คือสิ่งที่เหมาะกับฉัน คัดลอกรหัสเดียวกันจากหน้า Bootstrap แต่นี่เป็นลำดับที่ถูกต้อง
DuckRodgers

3

ฉันเผชิญกับสิ่งนี้ในขณะที่ฉันใช้แบบฟอร์ม ASP .NET วิธีแก้ปัญหาที่ฉันใช้คือการลบหรือแสดงความคิดเห็นเกี่ยวกับการอ้างอิง jQuery และ Bootstrap จาก<asp:ScriptManager runat="server">ในหน้าต้นแบบ ดูเหมือนว่าจะสร้างความขัดแย้งกับการอ้างอิง jQuery และ Bootstrap ที่คุณใส่ไว้ในไฟล์<header>.


2

ในกรณีที่ใครก็ตามที่ยังประสบปัญหาเดียวกันอย่าลืมตรวจสอบแหล่งที่มาของหน้ามุมมองของคุณในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าไฟล์ jquery และ bootstrap ทั้งหมดถูกโหลดหรือไม่และพา ธ ไปยังไฟล์นั้นถูกต้องหรือไม่ สำคัญที่สุด! อย่าลืมใช้ไฟล์ jquery ที่เสถียรล่าสุด


2

บางทีใครบางคนอาจได้รับประโยชน์จากสิ่งนี้:

สรุป (aka tl; dr)

เมนูแบบเลื่อนลงเงินทุนลดลงหยุดลงเนื่องจากการปรับรุ่นจากdjango-bootstrap3รุ่นไป6.2.211.0.0

พื้นหลัง

เราพบปัญหาที่คล้ายกันนี้ในdjangoไซต์เดิมซึ่งต้องอาศัยbootstrapผ่านdjango-bootstrap3อย่างมาก ไซต์ทำงานได้ดีมาโดยตลอดและยังคงดำเนินการผลิตต่อไป แต่ไม่ได้อยู่ในระบบทดสอบในพื้นที่ของเรา ไม่มีการเปลี่ยนแปลงที่เกี่ยวข้องอย่างชัดเจนในโค้ดดังนั้นปัญหาการพึ่งพาจึงน่าจะเป็นไปได้มากที่สุด

อาการ

เมื่อเยี่ยมชมไซต์บนเซิร์ฟเวอร์ทดสอบ django ในพื้นที่มันดูดีอย่างสมบูรณ์แบบเมื่อมองแวบแรก: ใช้สไตล์ / เลย์เอาต์bootstrapตามที่คาดไว้รวมถึงแถบนำทาง อย่างไรก็ตามเมนูแบบเลื่อนลงทั้งหมดไม่สามารถเลื่อนลงได้

ไม่มีข้อผิดพลาดในคอนโซลเบราว์เซอร์ โหลดแบบสแตติกjsและcssไฟล์ทั้งหมดสำเร็จแล้วและฟังก์ชันจากแพ็กเกจอื่น ๆ ที่ใช้jqueryทำงานได้ตามที่คาดไว้

สารละลาย

มันกลับกลายเป็นว่าdjango-bootstrap3แพคเกจในสภาพแวดล้อมหลามท้องถิ่นของเราได้รับการอัพเกรดเป็นรุ่นล่าสุดในขณะที่เว็บไซต์ที่ถูกสร้างขึ้นโดยใช้11.0.06.2.2

ย้อนกลับมาเพื่อdjango-bootstrap3==6.2.2แก้ไขปัญหาให้เราแม้ว่าฉันจะไม่รู้ว่าสาเหตุเกิดจากอะไร


1

ฉันใช้ราง 4.0 และพบปัญหาเดียวกัน

นี่คือคำตอบของฉันที่ผ่านการทดสอบ

เพิ่มลงใน Gemfile

gem 'bootstrap-sass'

วิ่ง

bundle install

จากนั้นเพิ่มลงใน app / assets / javascripts / application.js

//= require bootstrap

จากนั้นดรอปดาวน์ควรใช้งานได้

อย่างไรก็ตามวิธีแก้ปัญหาของ Chris ก็ใช้ได้ผลกับฉันเช่นกัน

แต่ฉันคิดว่ามันไม่ค่อยสอดคล้องกับแนวคิดท่อส่งเนื้อหา


0

ดูเหมือนว่าจะมีอะไรให้ทำมากกว่านี้สำหรับ Rails 4

  1. ภายในคุณ Gemfile เพิ่ม

    อัญมณี 'bootstrap-sass', '~> 3.2.0.2'

เท่าที่เห็นที่นี่

  1. ถัดไปคุณต้องเรียกใช้

    $ มัดติดตั้ง

นี่คือส่วนที่ไม่มีใครพูดถึง

เปิดไฟล์ config / application.rb ของคุณ

  1. เพิ่มค่านี้ก่อนวินาทีถึงท้ายสุด

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

เท่าที่เห็นที่นี่ลดลงประมาณ 20% ของหน้า

  1. จากนั้นสร้างไฟล์ custom.css.scss ในไดเร็กทอรีนี้

    แอป / สินทรัพย์ / สไตล์ชีท

ดังที่เห็นที่นี่อีกเล็กน้อยจากภารกิจข้างต้น

  1. ภายในไฟล์นั้นประกอบด้วย

    @import "bootstrap";


ตอนนี้หยุดเซิร์ฟเวอร์ของคุณและรีสตาร์ทและทุกอย่างจะทำงานได้ดี

ฉันพยายามเรียกใช้ bootstrap โดยไม่ใช้อัญมณี แต่มันไม่ได้ผลสำหรับฉัน

หวังว่าจะช่วยใครบางคนออกมา!


0

ฉันคิดว่ามันเป็นเรื่องของเส้นทางของไฟล์เส้นทางของคุณ ไม่ใช่ bootstrap หรือไฟล์ JQuery


0

ในกรณีของฉันการปิดใช้งานส่วนขยายของ Chrome ได้รับการแก้ไขแล้ว ฉันลบมันออกจาก Chrome ทีละคนจนเจอผู้ร้าย

เนื่องจากฉันเป็นผู้เขียนส่วนขยาย Chrome ที่ละเมิดฉันจึงคิดว่าฉันควรแก้ไขส่วนขยายนี้ดีกว่า!


0

เวอร์ชัน bootstrap ของฉันชี้ไปที่ 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>

เปลี่ยนเป็น 4-beta

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

และเริ่มทำงาน



0

สำหรับ Bootstrap 4 คุณต้องมีไลบรารีเพิ่มเติม หากคุณอ่านคอนโซลเบราว์เซอร์ Bootstrap จะพิมพ์ข้อความแสดงข้อผิดพลาดเพื่อแจ้งว่าคุณต้องการให้ดร็อปดาวน์ทำงาน

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

0

ในโครงการเชิงมุมเราเพิ่ม angular-cli.json หรือ angular.json บรรทัดเหล่านี้:

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

  ],

0

ฉันพยายามทุกคำตอบข้างต้นและรุ่นเดียวที่ทำงานสำหรับฉันเป็นjQuery 1.11.1 ฉันลองกับเวอร์ชันอื่น ๆ1.3.2, 1.4.4, 1.8.2, 3.3.1และเมนูแบบเลื่อนลง navbar ไม่ทำงาน

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

0

หากคุณประสบปัญหาในRuby on Railsทางออกที่ครบถ้วนสมบูรณ์ให้บริการโดยแฟ้ม readme Bootstrap ทับทิมอัญมณี

หรือเรียกสั้น ๆ ว่า

  1. เปลี่ยนชื่อapplication.cssเป็นapplication.scss
  2. เพิ่ม @import "bootstrap";
  3. เพิ่มgem 'jquery-rails'ไปที่Gemfileจนกว่าจะมีอยู่
  4. เพิ่มไป//= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets application.js
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.