0

Bootstrap 3.2 のレスポンシブ ナビゲーション バーを自分のサイトで動作させようとしてきましたが、奇妙なことに、bootstrap.js ファイルを含めない限り、完全に動作します。navbar の「レスポンシブ」部分 (別名、ハンバーガー ボタン) は、navbar が折りたたまれたときに存在するこのファイルに依存しているため、この厄介なファイルが存在する場合でも動作するようにしたいと考えています。head-tag 内と終了 body-tag のすぐ上に配置しようとしましたが、違いはありません (また、常に jquery の下に配置するようにしました)。これが私の navbar です。

<body>
<div id="wrapper">
    <div class="container">
        <!-- RAD 1: Navigation -->
        <header class="row">    
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                      
                    </button>
                    <a class="navbar-brand" href="index.html">Optalux</a>
                </div>
                <div class="collapse navbar-collapse" id="collapse">                
                    <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="om-optalux.html" class="dropdown-toggle" data-toggle="dropdown">Om Optalux</a>
                            <ul class="dropdown-menu">
                                <li><a href="om-optalux.html#personlig-ogonkirurgi">Personlig Ögonkirurgi</a></li>
                                <li><a href="om-optalux.html#medicinsk-verksamhetschef">Medicinsk Verksamhetschef</a></li>
                                <li><a href="om-optalux.html#lediga-tjanster">Lediga Tjänster</a></li>
                            </ul>
                        </li>                           
                    </ul>
                </div>              
            </nav>
        </header>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>

繰り返す: ナビゲーション バーは、bootstrap.js ファイルを含めない限り、デフォルト モード (折りたたまれていない) で正常に動作しますが、レスポンシブ モードはほとんど役に立ちません。これは私を夢中にさせているので、助けていただければ幸いです。

4

1 に答える 1

0

classドロップダウン メニュー項目からおよび属性を削除しdata-toggleます。

<ul class="dropdown-menu">
  <li><a href="om-optalux.html#personlig-ogonkirurgi">Personlig Ögonkirurgi</a></li>
  <li><a href="om-optalux.html#medicinsk-verksamhetschef">Medicinsk Verksamhetschef</a></li>
  <li><a href="om-optalux.html#lediga-tjanster">Lediga Tjänster</a></li>
</ul>

Bootstrap Dropdown プラグインはdata-toggle='dropdown'マークアップを見て、それらの項目をドロップダウンに変換しようとします。リンクをクリックするたびに、インターセプト (およびデフォルトの動作の防止) を行っています。

于 2013-11-07T21:46:19.830 に答える