2013-08-20 12 views
23

मैं बूटस्ट्रैप के साथ पकड़ने और कम सफलता प्राप्त करने की कोशिश कर रहा हूं। मैं बस के रूप में वेब पेज केवल से प्रतियां का उपयोग कर एक स्थानीय इस टेम्पलेट काबूटस्ट्रैप ड्रॉपडाउन मेनू काम नहीं कर रहा है (क्लिक किए जाने पर नीचे नहीं गिर रहा है)

http://getbootstrap.com/examples/jumbotron/

मैं एक html पृष्ठ में सीधे एचटीएमएल की नकल की है काम कर संस्करण प्राप्त करने की कोशिश कर रहा हूँ और उसी क्रम में CSS और JS फ़ाइलों संदर्भित मेरी मशीन पर नवीनतम डाउनलोड। हालांकि कुछ भी नहीं होता है जब ड्रॉपडाउन के बगल में तीर क्लिक किया जाता है (यानी कोई मेनू प्रकट नहीं होता है)

मैंने कोड को जेएसफ़िल्ड में पुन: पेश करने का प्रयास किया है, लेकिन यह भी बदतर है और मेनू को बिल्कुल ठीक से प्रदर्शित नहीं करता है। http://jsfiddle.net/andieje/kRX6n/

यहां मेरा पृष्ठ का आउटपुट है। मैं भी शामिल लटकती भी जे एस

<!DOCTYPE html> 
<html> 
<head><title> 
    Untitled Page 
</title><link href="styles/bootstrap.css" rel="stylesheet" /> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="JavaScript/html5shiv.js"></script> 
     <script src="JavaScript/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div> 



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

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" /> 

</body> 
</html> 

मैं भी इस कोड को जोड़ने की कोशिश की लेकिन कोई लाभ नहीं हुआ

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 
+0

क्या आप वाकई 'bootstrap.min.js' फ़ाइल अवधि और नहीं एक पानी का छींटा का उपयोग नहीं कर रहे हैं? मैं अभी स्रोत देख रहा हूं, और इसकी अवधि का उपयोग कर रहा हूं। – Kristian

+0

हाय - मेरी फ़ाइल को डैश के साथ नामित किया गया है और अवधि नहीं है। धन्यवाद – user2274191

उत्तर

10

बस type="text/javascript"

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

यहाँ निकालें अद्यतन है - http://jsfiddle.net/andieje/kRX6n/

+2

आपके उत्तर के लिए धन्यवाद। मुझे एक ही समस्या का सामना करना पड़ रहा था और आपका समाधान काम करता था। लेकिन क्या आप बता सकते हैं कि हैनव 'टेक्स्ट/जावास्क्रिप्ट' की समस्या क्या है? – user2243747

+0

यह एक विचित्र समस्या के लिए एक विचित्र फिक्स है (लेकिन यह काम किया!) – contactmatt

+0

यह मेरे लिए भी काम करता है! लेकिन यह अजीब हाहा – erginduran

74

मुझे एक ही समस्या का सामना करना पड़ा, समाधान मेरे लिए काम किया, उम्मीद है कि यह काम करेगा आप भी। यदि आप यह काम नहीं करेगा शफ़ल

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 
</script> 

, इससे पहले कि "bootstrap.min.js" फाइल "jquery.min.js" फ़ाइल शामिल करें।

+1

$ ('ड्रॉपडाउन-टॉगल') जोड़ रहा है। ड्रॉपडाउन(); मेरी समस्या हल हो गई धन्यवाद। – Murat

+0

आदेश प्रासंगिक प्रतीत होता है। फ्लास्क-बूटस्ट्रैप के साथ एक Jinja2 टेम्पलेट बूटस्ट्रैप/base.html है जिसमें वास्तव में यह ऑर्डर है। मेरे मामले में मुझे यह एहसास नहीं हुआ और स्क्रिप्ट को उप-टेम्पलेट में फिर से शामिल किया गया। इसने आशाशक्ति द्वारा वर्णित आदेश की समस्या के कारण जाहिर तौर पर ड्रॉपडाउन तोड़ दिया। – bvanlew

+1

$ ('ड्रॉपडाउन-टॉगल') जोड़कर हल की गई समस्या। ड्रॉपडाउन(); धन्यवाद –

1

शरीर टैग को खोलने के बाद बस इन दोनों फ़ाइलों को जोड़ें। शरीर टैग के बाद कहीं भी 'बॉडी टैग के बाद' ध्यान रखें। यदि आप बॉडी टैग के अंदर नीचे उल्लिखित फाइलें जोड़ते हैं तो आपकी समस्याएं अभी भी अनसुलझे होंगी।

तो बॉडी टैग के करीब या उससे पहले उन्हें पेस्ट करें ... यह 100% काम करता है। मैंने परीक्षण किया है और इसे काम कर लिया है!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
-2

मेरे पास एक ही समस्या थी जिसे मैंने निम्नलिखित स्क्रिप्ट को हटा दिया और यह मेरे लिए काम किया।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
4

इस स्क्रिप्ट को मेरे कोड में जोड़ना ड्रॉपडाउन मेनू को ठीक करता है।

<script> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script>

संबंधित मुद्दे