বুটস্ট্র্যাপ ড্রপডাউন মেনু কাজ করছে না


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
দুঃখিত, কর্মক্ষেত্রে আমি যখন এটি লিখেছি। আমি ব্যাখ্যাটি সম্পাদনা করেছি।
ব্যবহারকারী 2540528

আপনি আমাদের লিঙ্ক দিতে পারেন? @ ব্যবহারকারী 2540528
এসটিপি 38

জেএস ফাইলের লিঙ্ক?
ব্যবহারকারী 2540528

1
আমি কেবল আপনার কোডটি অনুলিপি করে জেএস / সিএসএস যুক্ত করেছি এবং এটি আমার মেশিনে কাজ করে
ক্রিস

'আমি সোজা বুটস্ট্র্যাপের ওয়েবসাইট থেকে অনুলিপি করেছি' @ ব্যবহারকারী 2540528, আপনি কি আমাকে এই লিঙ্কটি দিতে পারেন?
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">

এবং দেখুন এটি কার্যকর হবে কিনা।


এটি এটা করেছে। স্থানীয় ফাইলগুলি কাজ না করার কোনও কারণ? এবং এই জেএস উত্সগুলি যদি আমি এটি কোনও ডোমেনে সঠিকভাবে স্থাপন করি? আমার অ্যাপটি শেষ হয়ে গেলে এবং এটি প্রকাশের পরেও আমার অ্যাপটি এখনও কাজ করে তা নিশ্চিত করতে চাই। (এটি আমার প্রথম, সুতরাং আমি কেন জিজ্ঞাসা করব)
ব্যবহারকারী 2540528

@ ব্যবহারকারী 2540528 সম্ভবত ফাইলটির নামকরণের পরে আলাদাভাবে নামকরণ করা হয়েছে jquery-1.11.0.jsবা এটি মোটেই নেই।
ক্রিস

user2540528 তোমাকে মিস করি bootstrap.css করলো
Avec

1
আমার সমস্যাটি হ'ল আমার কাছে ঠিক মতো জায়গায় বুটস্ট্র্যাপ
সিএসএস

আমি বুঝতে পেরেছি যে এই কোড লাইনের ক্রমটিও গুরুত্বপূর্ণ। আপনি যদি গুগল এপিসকে কোডের শেষ লাইন হিসাবে রাখেন তবে এটি কার্যকর হয় না।
Efe Büyük

114

আমার একটি বুটস্ট্র্যাপ + রেল প্রকল্প ছিল এবং ড্রপডাউন ভাল কাজ করেছে। তারা একটি আপডেটের পরে কাজ শুরু করে ...

এই সমস্যাটি সমাধান করে এমন সমাধান, .js ফাইলে নিম্নলিখিতটি যুক্ত করুন:

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

বুটস্ট্র্যাপ 3 এবং রেল 4.2 নিয়ে আমার একটি সমস্যা সমাধান হয়েছে যেখানে ড্রপডাউনটি কেবল প্রথমবারের মতো কাজ করবে, তবে দ্বিতীয় ক্লিকে নয়।
বোল্ডার

গ্রিল প্রকল্প ডাব্লু / স্পড সিএমএস - এটি আমার ড্রপ-ডাউন টগল সমস্যার সমাধান করেছে।
টাইলার রাফের্টি

আপনাকে এই জন্য অনেক ধন্যবাদ 1। সবাই বলছে "বুটস্ট্র্যাপের আগে jquery যুক্ত করুন"। কিন্তু এটা ছিল। এই তারা কেবল উত্তর দেয়, এক ঘন্টারও বেশি সময় দেখার পরে, যে কাজ করেছে!
ম্যানটাইস

1
এটি আমাকে প্রচুর সাহায্য করেছিল। কোনও ধারণা কেন এই ফিক্সটি প্রয়োজন?
ব্র্যাক

1
এই সমাধানটি আমার পক্ষে কাজ করেছিল। দেখা গেল যে আমি আমার সাইটে দুবার বুটস্ট্র্যাপ আমদানি করেছি, আমি একবার মাত্র এটি আমদানি করার পরে, এই সমাধানের সমাধান ছাড়াই এটি কাজ শুরু করে।
harshpatel991

27

100% কাজ সমাধান

সমস্ত জেএস এবং সিএসএস লিঙ্কগুলির মধ্যে কেবল প্রথমে আপনার জ্যাকুরি লিঙ্কটি রাখুন

উদাহরণ সঠিক

<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 ব্যবহার করে
সিদ্ধরাম এইচ

@ টডডমো এটি কাজ করে, কেবল জ্যাকারি, বুটস্ট্র্যাপ এবং সিএসএস সঠিকভাবে লোড হয়েছে কিনা তা পরীক্ষা করে দেখুন বা গুগল ক্রোম ডাবগার
এলএমকে

12

বুটস্ট্র্যাপ জেএস লিঙ্কের আগে 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 এর মতে, ড্রপডাউনগুলি তৃতীয় পক্ষের লাইব্রেরি পপার.জেজে নির্মিত হয়। সুতরাং, যদি ড্রপডাউন মেনু অনক্লিক না করে তবে কেবল ড্রপডাউন হোভারে কাজ করে তবে পপ্পার.জেস, বুটস্ট্র্যাপ.জেএস এবং বুটস্ট্র্যাপ সিএসএস অন্তর্ভুক্ত রয়েছে। বুটস্ট্র্যাপ বান্ডিলগুলি অন্তর্ভুক্ত করার আগে পপার.জেজেস অন্তর্ভুক্ত না করা অন্যতম কারণ হতে পারে।

<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 এর জন্য এটি উত্তর যা আমরা যখন আমাদের প্রকল্পগুলিতে কেবল জ্যাকুয়ারি এবং বুটস্ট্র্যাপ অন্তর্ভুক্ত করতে ব্যবহৃত হয় তখন এটি একটি বড় পরিবর্তন।
Vindic

1
হ্যাঁ, অর্ডারটি সত্যই গুরুত্বপূর্ণ।
নিখিলমেথ

এটি আমার জন্য কাজ করেছে। বুটস্ট্র্যাপ পৃষ্ঠা থেকে একই কোডগুলি অনুলিপি করা হয়েছে, তবে এটি তাদের সঠিক ক্রম থাকা উচিত
ডাকরডজার্স

3

আমি যখন এএসপি নেট নেট ফর্মগুলি ব্যবহার করছিলাম তখন আমি এর মুখোমুখি হয়েছি। আমি যে সমাধানটি ব্যবহার করেছি তা হ'ল <asp:ScriptManager runat="server">মাস্টার পৃষ্ঠায় jQuery এবং বুটস্ট্র্যাপের উল্লেখগুলি মুছতে বা মন্তব্য করা । দেখে মনে হচ্ছে এটি jQuery এবং বুটস্ট্র্যাপের রেফারেন্সগুলির সাথে বিরোধ তৈরি করে যা আপনি রেখেছেন <header>


2

যদি এখনও কেউ একই সমস্যার মুখোমুখি হয় তবে আপনার ব্রাউজারে আপনার ভিউ পৃষ্ঠা উত্সটি যাচাই করে দেখুন যে সমস্ত jquery এবং বুটস্ট্র্যাপ ফাইল লোড হয়েছে এবং ফাইলটির পথ সঠিক কিনা। অতি গুরুত্বপুর্ন! সর্বশেষ স্থিতিশীল jquery ফাইল ব্যবহার নিশ্চিত করুন।


2

হতে পারে যে কেউ এর থেকে উপকৃত হতে পারে:

সংক্ষিপ্তসার (ওরফে টিএল; ডা)

বুটস্ট্র্যাপ dropdowns থেকে আপগ্রেড করার কারণে ড্রপ বন্ধ django-bootstrap3সংস্করণ 6.2.2থেকে 11.0.0

পটভূমি

আমরা একটি লিগ্যাসী মধ্যে একটি অনুরূপ সমস্যা সম্মুখীন djangoসাইটে উপর খুব বেশী নির্ভর bootstrapমাধ্যমে django-bootstrap3। সাইটটি সর্বদা সূক্ষ্মভাবে কাজ করেছিল এবং এটি উত্পাদন ক্ষেত্রে অবিরত রেখেছিল, তবে আমাদের স্থানীয় পরীক্ষা পদ্ধতিতে নয় not কোডটিতে কোনও সুস্পষ্ট সম্পর্কিত পরিবর্তন ছিল না, তাই নির্ভরতার সমস্যা সম্ভবত ছিল was

লক্ষণ

স্থানীয় জ্যাঙ্গো পরীক্ষার সার্ভারে সাইটটি দেখার সময় , এটি প্রথম নজরে একেবারে ঠিক দেখাচ্ছে: স্টাইল / লেআউট ব্যবহার করেbootstrap দেখাচ্ছিল: স্ট্যান্ড প্রত্যাশিতভাবে যেমন নববার সহ । তবে সমস্ত ড্রপডাউন মেনু ড্রপ ডাউন করতে ব্যর্থ হয়েছে।

ব্রাউজার কনসোলে কোনও ত্রুটি নেই। সমস্ত স্ট্যাটিক jsএবং cssফাইলগুলি সাফল্যের সাথে লোড হয়েছে এবং অন্যান্য প্যাকেজগুলির উপর নির্ভরশীলতা jqueryপ্রত্যাশার মতো কাজ করছে।

সমাধান

দেখা গেল যে django-bootstrap3আমাদের স্থানীয় অজগর পরিবেশে প্যাকেজটি সর্বশেষতম সংস্করণে আপগ্রেড করা হয়েছে 11.0.0, যেখানে সাইটটি ব্যবহার করে নির্মিত হয়েছিল 6.2.2

django-bootstrap3==6.2.2আমাদের জন্য সমস্যাটি সমাধান করতে পিছনে ঘুরছে , যদিও এর সঠিক কারণটি সম্পর্কে আমার কোনও ধারণা নেই।


1

আমি রেল ৪.০ ব্যবহার করছি এবং একই সমস্যায় পড়েছি

এখানে আমার সমাধান যা পরীক্ষায় উত্তীর্ণ হয়েছিল

জেমফাইলে যোগ করুন

gem 'bootstrap-sass'

চালান

bundle install

তারপরে অ্যাপ / সম্পদ / জাভাস্ক্রিপ্ট / অ্যাপ্লিকেশন.জেজে যোগ করুন

//= require bootstrap

তারপরে ড্রপডাউন কাজ করা উচিত

যাইহোক, ক্রিসের সমাধানটি আমার পক্ষেও কার্যকর।

তবে আমি মনে করি এটি সম্পত্তির পাইপলাইন ধারণার সাথে কম


0

দেখে মনে হচ্ছে রেল 4 এর জন্য আরও কিছু করা দরকার।

  1. আপনার ভিতরে জেমফিল অ্যাড করুন।

    রত্ন 'বুটস্ট্র্যাপ-সাস', '3.> 3.2.0.2'

যেমন এখানে দেখা

  1. পরবর্তী আপনি চালানো প্রয়োজন

    nd বান্ডিল ইনস্টল

এই অংশটি কেউ উল্লেখ করেনি

আপনার কনফিগারেশন / application.rb ফাইলটি খুলুন

  1. দ্বিতীয়টি শেষের আগে ডানদিকে যুক্ত করুন

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

এখানে পৃষ্ঠায় প্রায় 20% দেখা গেছে

  1. এরপরে এই ডিরেক্টরিতে একটি কাস্টম.এসএসএসএসএসএস ফাইল তৈরি করুন

    অ্যাপ্লিকেশন / সম্পদ / স্টাইলশীট

উপরের কাজটি থেকে এখানে আরও কিছুটা নিচে দেখা গেছে

  1. এই ফাইলের ভিতরে অন্তর্ভুক্ত

    @ ইমপোর্ট "বুটস্ট্র্যাপ";


এখন আপনার সার্ভারটি বন্ধ করুন এবং পুনরায় চালু করুন এবং সবকিছু ঠিকঠাক করা উচিত।

আমি কোনও রত্ন ব্যবহার না করে বুটস্ট্র্যাপ চালানোর চেষ্টা করেছি তবে এটি আমার পক্ষে কার্যকর হয়নি।

আশা করি যে কাউকে সাহায্য করবে!



0

আমার ক্ষেত্রে, ক্রোম এক্সটেনশনগুলি অক্ষম করা এটি ঠিক করে দিয়েছে। আমি ক্রিম থেকে একে একে অপসারণ করেছি যতক্ষণ না আমি অপরাধীকে খুঁজে পাই।

যেহেতু আমি আপত্তিজনক ক্রোম এক্সটেনশনের লেখক, আমার ধারণা আমি আরও ভাল করে এক্সটেনশনটি ঠিক করেছি!


0

আমার বুটস্ট্র্যাপ সংস্করণটি বুটস্ট্যাপ ৪-আলফাকে নির্দেশ করছে,

<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

কৌণিক প্রকল্পে আমরা কৌণিক-ক্লাই.জেসন বা কৌণিক.জসন থিসিস লাইন যুক্ত করি:

      "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 দিয়ে চেষ্টা করেছি এবং নাভবার ড্রপডাউন কাজ করে না।

<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
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.