2012-02-17 15 views
7

続きはthis questionから、私はまだTwitter Bootstrapに苦労しています。ナビゲーションバーが表示されるようになったので、ドロップダウンメニューを追加しようとしています。私が何をしようと、私は実際にメニューの一部を動作させることはできません!ここに私のメニューのスクリーンショットがあります。Twitter Bootstrapのドロップダウンメニュー

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> 

ご覧のとおり、私はTwitterからドロップダウンJavascriptファイルを参照しています。私はこれをローカルで参照しようとしましたが、違いはありませんでした。また、ドロップダウンメニューを接続してTwitterのJavascriptファイルを呼び出す必要があると思われるJavascriptを含めました。

私はこれがあなたのコード内でのjQueryを含むされている場合、私は見ることができない

答えて

12

が動作していない理由として途方に暮れてよ。ドロップダウンが機能するには、他のすべてのスクリプトの前にそれを含める必要があります。

ここでGoogleの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バージョンが必要なものだと思われます。私はまたヘッダーの順序を変更しました - 私は今、CSSファイルとスクリプトを含んでいます。これは、他の方法でNavbarが2行以上に分割されたためです。ご協力いただきありがとうございます。 – Stu

5

マインドはあなたの例では、このコードを使用する:

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

それは何もしていませんので。

関連する問題