बूटस्ट्रैप ड्रॉपडाउन मेनू काम नहीं कर रहा है


100

मुझे अपने ड्रॉपडाउन से काम करने में परेशानी हो रही है। मुझे पूरी तरह से दिखाने के लिए नेवबार मिल सकता है, लेकिन जब मैं "ड्रॉपडाउन" (उन दोनों में से) पर क्लिक करता हूं तो यह ड्रॉपडाउन मेनू प्रदर्शित नहीं करता है। मैंने इस बारे में अन्य पोस्ट देखने की कोशिश की है, लेकिन कुछ भी नहीं जिसने सभी की समस्याओं को ठीक किया। मैंने बूटस्ट्रैप की वेबसाइट से सीधे स्रोत की प्रतिलिपि बनाई है, लेकिन मैं इसे अपनी मशीन पर काम करने के लिए प्राप्त नहीं कर सकता। क्या किसी के भी पास कोई सुझाव है? मैं एक घंटे से इसे घूर रहा हूं और यह पता नहीं लगा सकता कि समस्या क्या है।

<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 जोड़ा और यह मेरी मशीन पर काम करता है
क्रिस

'मैंने बूटस्ट्रैप की वेबसाइट से सीधे सोर्स कॉपी किया' @ 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 आपको बूटस्ट्रैप की याद आ रही थी। एससीएस
Avec

1
मेरी समस्या यह थी कि मेरे पास बूटस्ट्रैप था। सही जगह पर
बूटस्टैप

मैंने महसूस किया कि उन कोड लाइनों का क्रम भी महत्वपूर्ण है। यदि आप google apis को अंतिम पंक्ति की कोड के रूप में रखते हैं, तो यह काम नहीं करता है।
एफे बुय्यड्स

114

मेरे पास बूटस्ट्रैप + रेल परियोजना थी, और ड्रॉपडाउन ने ठीक काम किया। उन्होंने अपडेट के बाद काम करना बंद कर दिया ...

यह वह समाधान है जिसने समस्या को ठीक किया है, .js फ़ाइल में निम्न जोड़ें:

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

एक मुद्दा जो मैंने बूटस्ट्रैप 3 और रेल्स 4.2 के साथ था, जहां ड्रॉपडाउन केवल पहली बार ही काम करेगा, लेकिन दूसरे क्लिक पर नहीं।
बोवेंडर

ग्रेल्स प्रोजेक्ट w / स्पॉड सीएमएस - इससे मेरी ड्रॉप-डाउन टॉगल समस्या हल हो गई।
टायलर रफ़रती

इसके लिए बहुत बहुत धन्यवाद। 1. हर कोई कह रहा है "बूटस्ट्रैप से पहले jquery जोड़ें"। लेकिन यह ऐसा था। यह वे केवल जवाब है, एक घंटे से अधिक की तलाश के बाद, यह काम किया!
MaNTiS

1
इससे मुझे काफी मदद मिली। किसी भी विचार क्यों इस तय की जरूरत है?
ब्रैक

1
इस समाधान ने मेरे लिए काम किया। यह पता चला कि मैंने अपनी साइट पर दो बार बूटस्ट्रैप का आयात किया था, मैंने इसे केवल एक बार आयात करने के बाद, इस समाधान में फिक्स किए बिना काम करना शुरू कर दिया।
harshpatel991

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>

मेरे मामले में काम नहीं किया। इवान बी के समाधान का उपयोग करना पड़ा।
टोडरमो

1
@ नबीन यह काम करता है, क्योंकि हमें पहले jquery लोड करना होता है और फिर बूटस्ट्रैप, क्योंकि बूटस्ट्रैप jquery का उपयोग करता है
सिद्दरम एच

@toddmo यह काम करता है, बस गूगल क्रोम dbugger में networy टैब से jquery, बूटस्ट्रैप और सीएसएस को सही ढंग से लोड किया गया है या नहीं की जाँच करें
LMK

12

बूटस्ट्रैप js लिंक से पहले jquery 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
आपके शब्द सही हैं लेकिन आपके द्वारा कही गई बातों के विपरीत कोड ब्लॉक हैं।
एस्ट्रा बियर

4

GetBootstrap.com के अनुसार, ड्रॉपडाउन तीसरे पक्ष के पुस्तकालय Popper.js पर बनाए गए हैं। इसलिए, यदि ड्रॉपडाउन मेनू ऑनक्लिक काम नहीं करता है, लेकिन केवल ड्रॉपडाउन के होवर पर काम कर रहा है, जिसमें popper.js, bootstrap.js और bootstrap.css शामिल हैं। बूटस्ट्रैप बंडलों को शामिल करने से पहले popper.js को शामिल नहीं करना एक कारण हो सकता है।

<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 के लिए यह उत्तर है जो एक बड़ा बदलाव है जब हम केवल अपनी परियोजनाओं में जेकरी और बूटस्ट्रैप शामिल करने के लिए उपयोग किए जाते हैं।
विंदिक

1
हां, आदेश वास्तव में मायने रखता है।
nikhilmeth

यह वही है जिसने मेरे लिए काम किया है। कॉपी किया गया बूटस्ट्रैप पेज से एक ही कोड है, लेकिन यह सही क्रम में वे में होना चाहिए।
DuckRodgers

3

एएसपी .NET फॉर्म का उपयोग करते समय मुझे इसका सामना करना पड़ा। मेरे द्वारा उपयोग किया गया समाधान <asp:ScriptManager runat="server">मास्टर पेज से jQuery और बूटस्ट्रैप संदर्भों को हटा या टिप्पणी कर रहा था । ऐसा लगता है कि यह jQuery और बूटस्ट्रैप संदर्भों के साथ एक संघर्ष पैदा करता है जो आप में डालते हैं <header>


2

यदि कोई समस्या अभी भी उसी समस्या का सामना कर रही है, तो अपने ब्राउज़र में अपने दृश्य पृष्ठ स्रोत की जांच करना सुनिश्चित करें कि क्या सभी जेकरी और बूटस्ट्रैप फाइलें भरी हुई हैं और फ़ाइल के पथ सही हैं। सबसे महत्वपूर्ण! नवीनतम स्थिर jquery फ़ाइल का उपयोग करना सुनिश्चित करें।


2

शायद कोई व्यक्ति इससे लाभान्वित हो सकता है:

सारांश (उर्फ टीएल डॉ।)

django-bootstrap3संस्करण से अपग्रेड करने के कारण बूटस्ट्रैप ड्रॉपडाउन गिरना बंद हो 6.2.2गया 11.0.0

पृष्ठभूमि

हम एक विरासत में एक ऐसी ही समस्या आई djangoलिया जिसपर काफी निर्भर करता है bootstrapके माध्यम से django-bootstrap3। साइट ने हमेशा ठीक काम किया था, और उत्पादन में ऐसा करना जारी रखा, लेकिन हमारे स्थानीय परीक्षण प्रणाली पर नहीं। कोड में कोई स्पष्ट संबंधित परिवर्तन नहीं थे, इसलिए एक निर्भरता मुद्दा सबसे अधिक संभावना थी।

लक्षण

स्थानीय django टेस्ट सर्वर पर साइट पर आने पर , यह पहली नज़र में पूरी तरह से ठीक लग रहा था: शैली / लेआउट bootstrapजैसा कि उम्मीद है, जिसमें नेवबार भी शामिल है। हालांकि, सभी ड्रॉपडाउन मेनू ड्रॉप डाउन करने में विफल रहे।

ब्राउज़र कंसोल में कोई त्रुटि नहीं। सभी स्थिर jsऔर cssफ़ाइलें सफलतापूर्वक लोड की गईं, और अन्य पैकेजों पर निर्भरता से कार्यक्षमता jqueryअपेक्षित रूप से काम कर रही थी।

उपाय

यह पता चला कि django-bootstrap3हमारे स्थानीय अजगर पर्यावरण में पैकेज को नवीनतम संस्करण में अपग्रेड किया गया था 11.0.0, जबकि साइट का उपयोग करके बनाया गया था 6.2.2

django-bootstrap3==6.2.2हमारे लिए इस मुद्दे को हल करने के लिए वापस रोलिंग , हालांकि मुझे पता नहीं है कि वास्तव में इसका क्या कारण है।


1

मैं रेल का उपयोग कर रहा हूँ 4.0 और उसी समस्या में भाग गया

यहाँ मेरा समाधान है कि परीक्षण पारित किया है

Gemfile में जोड़ें

gem 'bootstrap-sass'

Daud

bundle install

फिर एप्लिकेशन / संपत्ति / javascripts / application.js में जोड़ें

//= require bootstrap

फिर ड्रॉपडाउन काम करना चाहिए

वैसे, क्रिस का समाधान भी मेरे लिए काम करता है।

लेकिन मुझे लगता है कि यह परिसंपत्ति पाइपलाइन विचार के अनुरूप कम है


0

लगता है कि रेल्स 4 के लिए कुछ और किया जाना बाकी है।

  1. आपके अंदर Gemfile ऐड है।

    मणि 'बूटस्ट्रैप-सस', '~> 3.2.0.2'

जैसा कि यहां देखा गया है

  1. अगला आपको चलाने की आवश्यकता है

    $ बंडल स्थापित

यह वह हिस्सा है जिसका किसी ने उल्लेख नहीं किया है

आप config / application.rb फ़ाइल खोलें

  1. दूसरे से अंतिम छोर तक इस अधिकार को जोड़ें

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

जैसा कि यहां देखा गया है कि पृष्ठ के बारे में 20% नीचे है।

  1. अगला इस निर्देशिका में एक custom.css.scss फ़ाइल बनाएँ

    एप्लिकेशन / आस्तियों / स्टाइलशीट

जैसा कि यहाँ ऊपर कार्य से थोड़ा और नीचे देखा गया है

  1. उस फ़ाइल के अंदर शामिल हैं

    @import "बूटस्ट्रैप";


अब अपने सर्वर को बंद करें और पुनरारंभ करें और सब कुछ ठीक काम करना चाहिए।

मैंने एक मणि का उपयोग किए बिना बूटस्ट्रैप चलाने की कोशिश की, लेकिन यह मेरे लिए काम नहीं किया।

आशा है कि किसी को मदद करता है!



0

मेरे मामले में, Chrome एक्सटेंशन को अक्षम करने ने इसे ठीक कर दिया है। मैंने उन्हें एक-एक करके क्रोम से हटा दिया जब तक कि मुझे अपराधी नहीं मिला।

चूंकि मैं आक्रामक Chrome एक्सटेंशन का लेखक हूं, इसलिए मुझे लगता है कि मैं एक्सटेंशन को बेहतर ढंग से ठीक कर रहा हूं!


0

मेरा बूटस्ट्रैप संस्करण बूटस्टैप 4-अल्फा की ओर इशारा कर रहा था,

<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-बीटा में बदल गया

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

और इसने काम करना शुरू कर दिया



0

बूटस्ट्रैप 4 के लिए आपको एक अतिरिक्त पुस्तकालय की आवश्यकता है। यदि आप अपना ब्राउज़र कंसोल पढ़ते हैं, तो बूटस्ट्रैप वास्तव में एक त्रुटि संदेश प्रिंट करेगा, जिसमें कहा जाएगा कि आपको काम करने के लिए ड्रॉप डाउन की आवश्यकता है।

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

0

कोणीय परियोजनाओं में हम कोणीय-cli.json या angular.json theses लाइन्स जोड़ते हैं:

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

  ],

0

मैंने उपरोक्त सभी उत्तरों की कोशिश की और एकमात्र संस्करण जो मेरे लिए काम करता है वह है 1.11.1 jquery । मैंने अन्य सभी संस्करणों के साथ 1.3.2, 1.4.4, 1.8.2, 3.3.1 और नावबार ड्रॉपडाउन काम नहीं किया।

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

0

यदि आप रूबी ऑन रेल्स में समस्या का सामना करते हैं , तो बूटस्ट्रैप रूबी जेम रीडमी फ़ाइल द्वारा संपूर्ण समाधान प्रदान किया जाता है ।

या संक्षेप में:

  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
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.