Bootstrap导航栏下拉菜单在iPhone上无法使用。

Question

我正在使用mean.js框架内的"bootstrap": "~3.3.4"。在桌面上，导航栏下拉菜单在点击下拉图标时没有任何问题，可以正常打开并保持打开状态。但是在推送到staging服务器后，在iPhone和三星Galaxy浏览器上点击图标时，下拉菜单不再打开，或者有时会打开但无法保持打开状态。

以下是代码:

 <div   class="landing-page-header"> 

   <div class="navbar-header" >
    <button class="navbar-toggle mytoggle" type="button" data-ng-click="toggleCollapsibleMenu()">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a data-ui-sref="home" class="navbar-brand">
        <img class="header-logo" ng-src="modules/core/img/home/myimg.png" height="">
      </a>
  </div>
  <nav class="collapse navbar-collapse"  data-ng-show="!authentication.user" collapse="!isCollapsed" role="navigation">
    <ul class="nav navbar-nav navbar-right landing-page-nav" data-ng-hide="authentication.user">
        <li class="text-center" data-ng-repeat="item in menu.items | orderBy: 'position'" 
        data-ng-if="item.roles.indexOf('guest') !== -1" 
        ng-switch="item.type"
        data-ng-class="{active: $state.includes(item.state)}" 
        class="{{item.class}}" 

        target="{{item.target}}"
        dropdown="item.type === 'dropdown'">
          <a ng-switch-when="dropdown" class="dropdown-toggle">
            <span data-ng-bind="item.title"></span>
            <b class="caret"></b>
          </a>
          <ul ng-switch-when="dropdown" class="dropdown-menu">
            <li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" data-ui-sref-active="active">
              <a data-ui-sref="{{subitem.state}}" data-ng-bind="subitem.title"></a>
            </li>
          </ul>
          <a ng-switch-default data-ui-sref="{{item.state}}" data-ng-bind="item.title"></a>
        </li>
        <li class="divider-vertical"></li>
        <li class="text-center  " data-ui-sref-active="active">
            <a data-ui-sref="authentication.signin" target="_self">SIGN IN</a>
        </li>
    </ul>

  </nav>
  </div>

以下是CSS代码：

.landing-page-header {
      position: fixed;
      left: 0px;
      top: 0px;
      opacity: 0.9;
      background: #111;
      width:100%;
      height: 5em;
      z-index: 99;
      margin-bottom: 10em;
}

.navbar-brand img {
    /*background: #fff;*/
}
.landing-page-header ul {
    background: #111;
    margin-right:0.5em;


}

我在这个网站上查看了其他答案并搜索了这个问题。我发现有一个答案建议使用a或input而不是button，但我仍然遇到了相同的问题。

在浏览器中发生的情况是，在单击按钮（汉堡包）（在Galaxy和iPhone上）后，代码立即推送到暂存服务器上，导航栏就会呈现出来，但一旦单击菜单项，当您返回并再次单击汉堡包菜单时，导航栏将开始渲染，停止并立即返回。

有人有任何想法吗？

- pro

---

你应该在问题中添加一些CSS。这可能是按钮的z-index问题。我也遇到过类似的问题。 - disinfor

我已经编辑了问题。现在你可以看到代码了。 - pro

Answer 1

我已经自己找到了解决方法。我只需要将小于480像素的屏幕下拉菜单的位置设置为“静态”即可。

  @media (max-width: 480px) {
        .landing-page-header ul{  
           position: static;
           width:100%;
        }
    }

- pro