IOS（Safari）的Bootstrap hamburgermenu（崩溃）可见性问题

Question

我有一个使用bootstrap的响应webapp。当移动大小的汉堡菜单显示在标题中时。

当点击一个pc/mac/android手机时，它显示正确..但是，当用iOS-Safari点击时，它显示了四分之一秒，并且再次隐藏。我怀疑这是一个高度或Z指数的问题，但我不知道，我一直无法解决它。

你可以试试www.gjovikhk.no。

不管怎么说..这里是标题和菜单的HTML代码：

<div id="menu" class="navbar navbar-default"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <div id="logo" class="logo-placeholder"> 
         <a href='Default.aspx'> 
          <img runat="server" id="imgClubLogo" src="" /></a> 
        </div> 

       </div> 
       <div class="navbar-collapse collapse" style="z-index:9999999999"> 
        <ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;"> 
         <li class="nav"> 
          <asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" /> 
         </li> 


         <li class="nav"> 
          <a href="#" runat="server" id="lnkPersonalMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a> 
         </li> 
         <li class="nav"> 
          <a href="Forum.aspx?type=1" runat="server" id="lnkCoachForumMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i>&nbsp;Trenerforum</a> 
         </li> 
         <li class="nav"> 
          <div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False">&nbsp;</div> 
          <div style="float: left"> 
           <div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block"> 
            <a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important"> 
             Mine lag 
            </a> 
            <ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1"> 
             <asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand"> 
              <ItemTemplate> 
               <li role="presentation"> 
                <asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" /> 
               </li> 
              </ItemTemplate> 
             </asp:ListView> 
            </ul> 
           </div> 
          </div> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" /> 
         </li> 
         <li class="nav" style="display: none"> 
          <asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" /> 
         </li> 
         <li class="nav"> 
          <asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" /> 
         </li> 
        </ul> 

       </div> 
       <div class="navbar-icon-topright"> 
        <div style="float: right; margin-top: -8px; margin-right: 10px"> 
         <button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button> 
         <%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%> 
         <asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView"> 
          <LoggedInTemplate> 
           <ul class="nav navbar-nav navbar-right"> 
            <li><a runat="server" href="~/UserConfig.aspx" title="Manage your account"> 
             <div style="float: left"> 
              <div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px"> 
               <img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" /> 
              </div> 
             </div> 
             <div style="float: left; padding-left: 10px; color: #333"> 
              Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span> 
             </div> 
            </a></li> 
           </ul> 
          </LoggedInTemplate> 
         </asp:LoginView> 
        </div> 
       </div> 

      </div> 

Answer 1

试试这个，有相应的媒体查询和/或额外的选择只会影响响应和/或仅适用于iPhone，那样精确，您需要：

.collapse.in { 
    overflow: hidden; 
}