Bootstrap 3.0菜单在移动设备上不起作用

Question

我在bootstrap 3.0中看到导航菜单在菜单折叠时不工作的问题。要查看示例，请转到此处：http://apexenergetics.azurewebsites.net/

我开始思考也许我有一个缺少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> 

Answer 1

适合我。有一个Bootstrap 3的下拉列表有时不能用于触摸的问题。如果这是你的问题，你可以针对你的倒塌下拉按钮移动只能这样......

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

...和下​​拉移动将独立的功能。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相关问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.