ios - IOS (Safari) 上的 Bootstrap hamburgermenu(折叠)可见性问题

Question

我有一个使用 Bootstrap 的响应式网络应用程序。当移动尺寸时，标题中显示汉堡菜单。

当在 pc/mac/android 手机上点击时，它会正确显示。但是当用 iOS-Safari 点击时，它会显示四分之一秒，然后再次隐藏。我怀疑这是一个高度或 z-index 问题，但我不确定，而且我无法解决它。

您可以在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;
}