【问题标题】:Bootstrap 3.0 menu not working on mobile devicesBootstrap 3.0 菜单在移动设备上不起作用
【发布时间】:2014-01-30 00:12:31
【问题描述】:

我在 bootstrap 3.0 中看到一个问题,即当菜单折叠时导航菜单不起作用。要查看示例,请转到此处:http://apexenergetics.azurewebsites.net/

我开始认为我可能缺少 Javascript 文件或其他东西。我已经在我的 iPhone5 和 iPad 上测试了该网站。在浏览器中查看时效果很好。

更新:它似乎在 Windows Phone 上运行良好。此外,只有带有下拉菜单的项目不起作用。没有下拉菜单的链接/按钮。

<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>

【问题讨论】:

    标签: twitter-bootstrap menu twitter-bootstrap-3 collapse


    【解决方案1】:

    为我工作。有一个问题是 Bootstrap 3 的下拉菜单有时在触摸时不起作用。如果这是您的问题,您可以像这样将折叠的下拉按钮定位到移动设备...

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

    ...并为移动设备上的下拉菜单添加单独的功能。

    【讨论】:

    • 我把它放在我们的基本(索引)页面上的一个
    • 我在我的 Nexus 5 上测试了上述示例站点,它运行良好。但是,我的网站与 OP 提到的问题相同。那么后来有修复吗?
    猜你喜欢
    • 2019-04-18
    • 2013-06-30
    • 1970-01-01
    • 1970-01-01
    • 2013-07-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多