2014-01-10 108 views
0

我在bootstrap 3.0中看到導航菜單在菜單摺疊時不工作的問題。要查看示例,請轉到此處:http://apexenergetics.azurewebsites.net/Bootstrap 3.0菜單在移動設備上不起作用

我開始思考也許我有一個缺少Javascript文件或其他東西。我已經測試了我的iPhone5以及我的iPad上的網站。在瀏覽器中查看時,它工作正常。

更新:它似乎在Windows手機上正常工作。此外,只有帶有下拉菜單的項目才能正常工作。鏈接/按鈕沒有下拉工作。

<header> 
     <div class="row"> 
      <div class="col-xs-12 col-md-6"> 
       <img src="@Href("~/img/logo.png")" alt="Apex Energetics"> 
      </div> 
      <div class="col-xs-12 col-md-6"> 
       @*<form class="form-search"> 
      <input type="text" class="input-medium search-query" placeholder="Search Apex Energetics"> 
      <button type="submit" class="search-btn" >Search</button> 
      </form>*@ 
      </div> 
     </div> 

     <!-- Static navbar --> 
     <div class="navbar"> 
     <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="@Href("~/index")">Home</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apex Complexes <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/K-Line_Formulas")">K-Line Formulas</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/K-plex")">&nbsp;&nbsp;&#187;K-Line Nutritionals</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/K-Line_Creams")">&nbsp;&nbsp;&#187;K-Line Creams</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/K-Line_Homeopathics")">&nbsp;&nbsp;&#187;K-Line Homeopathics</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/Z-plex")">TerrainZyme&reg; Formulas</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/L-plex")">Cellegion Formula&reg;</a> 
        </li> 
       </ul> 
       </li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Homeopathics <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/antitox")">Antitox&reg;</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/A-plex")">&nbsp;&nbsp;-B-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/B-plex")">&nbsp;&nbsp;-B-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/C-plex")">&nbsp;&nbsp;-C-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/D-plex")">&nbsp;&nbsp;-D-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/E-plex")">&nbsp;&nbsp;-E-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/N-plex")">&nbsp;&nbsp;-N-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/W-plex")">&nbsp;&nbsp;-W-Plex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/S-plex")">Allertox</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/R-plex")">RegenRx</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/G-plex")">Metaboplex</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/M-plex")">Endotox</a> 
        </li> 
        <li class="dropdown-toggle"> 
        <a href="@Href("~/products/flowers")">Flower Combinations</a> 
        </li> 
       </ul> 
       </li> 
       <li><a href="@Href("~/products/purvela")">Purvela&trade;</a></li> 
       <li><a href="@Href("~/pages/contact")">Contact Us</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
</header> 
+1

發表了一些代碼... – Nix

回答

0

適合我。有一個Bootstrap 3的下拉列表有時不能用於觸摸的問題。如果這是你的問題,你可以針對你的倒塌下拉按鈕移動只能這樣......

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {}

...和下​​拉移動將獨立的功能。

+0

我在哪裏可以做到這一點? – user3183432

+0

我在包含導航欄HTML的基礎(索引)頁面上輸入

相關問題