2012-02-17 30 views
7

के साथ ड्रॉपडाउन मेनू this question से आगे, मैं अभी भी ट्विटर बूटस्ट्रैप के साथ संघर्ष कर रहा हूं। मैंने अपनी नेविगेशन बार को प्रकट करने में कामयाब रहा है और मैं इसे ड्रॉप डाउन मेनू जोड़ने की कोशिश कर रहा हूं। कोई फर्क नहीं पड़ता कि मैं क्या कोशिश करता हूं, मैं वास्तव में काम करने के लिए मेनू के ड्रॉप डाउन हिस्से को प्राप्त नहीं कर सकता! यहां मेरे मेनू का एक स्क्रीनशॉट है।ट्विटर बूटस्ट्रैप

navigation bar

आप देख सकते हैं, मैं "खाता सेटिंग" जो एक ड्रॉप डाउन मेनू होना चाहिए लेकिन जब मैं उस पर क्लिक करें, विकल्प नीचे कोई बूंद दिखाई देते हैं। नीचे मेरा कोड है:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 

    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        <a class="brand" href="#">Present Ideas</a> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Help</a></li> 
        <li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Register</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Logout</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container-fluid"> 
     @RenderBody() 
    </div> 
</body> 
</html> 

जैसा कि आप देख सकते हैं, मैं ट्विटर से ड्रॉपडाउन जावास्क्रिप्ट फ़ाइल का संदर्भ दे रहा हूं। मैंने स्थानीय रूप से संदर्भित करने का भी प्रयास किया है जिसने कोई फर्क नहीं पड़ता। मैंने जावास्क्रिप्ट भी शामिल किया है जो मुझे विश्वास है कि ड्रॉप डाउन मेनू को हुक-अप करना चाहिए और ट्विटर की जावास्क्रिप्ट फ़ाइल में कॉल करना चाहिए।

मैं क्यों इस काम नहीं कर रहा

उत्तर

12

मैं नहीं देख सकते हैं, जहां आप अपने कोड में jQuery शामिल कर रहे हैं के रूप में एक नुकसान में हूँ। ड्रॉपडाउन के काम के लिए आपको अपनी सभी अन्य स्क्रिप्ट से पहले इसे शामिल करना होगा। क्योंकि यह कुछ भी नहीं कर रहा है

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

:

यहाँ गूगल CDN से jQuery स्क्रिप्ट है:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
+2

अद्भुत! उसने एक इलाज किया। मेरे पास मूल रूप से 1.5 jQuery स्क्रिप्ट शामिल थी लेकिन ऐसा लगता है कि 1.7 संस्करण की आवश्यकता है। मैंने अपने हेडर में ऑर्डरिंग भी बदल दी - अब मैं सीएसएस फ़ाइल और फिर स्क्रिप्ट्स को शामिल कर रहा हूं क्योंकि दूसरी तरफ से मेरे नेविबार ने 2 लाइनों पर विभाजित किया। आपकी सहायता के लिए धन्यवाद. – Stu

5

मन यह भी बेमानी है अपने उदाहरण में इस कोड का उपयोग करने के लिए।

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