0

Twitter のブートストラップでドロップダウン メニューを作成するのに問題があります。これが私がnavbarコードのために持っているものです。

<div class="container-fluid">
<div class="row-fluid">
    <div class="span12">
        <div class="navbar">
            <div class="navbar-inner">
                    <ul class="nav">
                        <a class="brand">Title of website</a>
                        <li class="divider-vertical"></li>
                            <li class="active"><a href="index.html">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                    </ul>
            </div>
        </div>
    </div>
</div>

これに関するさまざまなチュートリアル/例を見てきましたが、何が間違っているのかわかりません。ドキュメントの最後にjqueryとbootstrap-dropdown.jsファイルを含めました。

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

この問題に関する助けをいただければ幸いです。

前もって感謝します、

4

4 に答える 4

0

コードをテストしたところ、動作するはずです。コードでこのデモを参照してください

1 つのマイナー アップデート。.brand要素は、無効であるため、 の子ではなく、 navbar の子である必要がありulます。

 <div class="navbar">
    <a class="brand">Title of website</a>
       <div class="navbar-inner">
           <ul class="nav">
               <li class="divider-vertical"></li>

$('.dropdown-toggle').dropdown();上記のデモを見るとわかるように、イベントを呼び出す必要はありません。

于 2013-06-14T11:44:22.447 に答える
0

あなたのコードにエラーは見つかりませんでした。

missing or not being loaded bootstrap-dropdown.js file

moreover please add bootstrap.js core file (as added in jsfiddle in below link)

このjsfiddleをチェックしてください、http: //jsfiddle.net/mastermindw/kbzxV/

于 2013-06-14T11:40:07.500 に答える
0

これを試して

//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <style>
        .box
        {
            border: 1px solid red;
            height: 100%;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="navbar">
                    <div class="navbar-inner">
                        <ul class="nav">
                            <a class="brand">Title of website</a>
                            <li class="divider-vertical"></li>
                            <li class="active"><a href="index.html">Home</a></li>
                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
于 2013-06-14T11:41:00.273 に答える