下拉菜单切换在 iPhone 上不起作用

Question

我有下面的菜单 + 切换按钮适用于 Android 上的任何浏览器，但 iOS....

我可以点击按钮，然后菜单会在显示后立即显示和隐藏。

我使用了很多变通方法和修复，在 bootstrap.js 中禁用 touchstart 或更改导航栏的 z-index。 . .但无论如何它不会帮助我解决这个问题。

单击切换按钮后菜单似乎出现了，但我什么也看不到。我必须再次触摸切换按钮以关闭菜单并再次触摸以再次打开菜单。

你可以通过http://getheadsup.com/检查你是否有iPhone

感谢您对我的问题的关注。

 <div id="header-wrapper" class="header fadeIn">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid row">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html#top"></a>
            </div>
            <div class="navbar-footer">
                <a href='order.php' class='navbar-preorder'>PRE ORDER</a>
                <!-- hamburger icon -->
                <button type="button" class="navbar-toggle collapsed menu-btn">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar top-bar"></span>
                    <!-- <span class="icon-bar middle-bar"></span>-->
                    <span class="icon-bar bottom-bar"></span>
                </button>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="collapse navbar-collapse main-menu">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="index.html#alexa">Alexa</a></li>
                        <li>
                            <a href="index.html#technology">Technology</a></li>
                        <li id="spin">
                            <a href="index.html#techspec">Tech Specs</a></li>
                        <li>
                            <a href="index.html#faq">FAQ</a></li>
                        <li>
                            <a href="http://blog.getheadsup.com/">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

看看

<div class="collapse navbar-collapse main-menu">

大小几乎没有，高度 = 1px。 由于它包含菜单，因此不会显示任何内容。

我不知道其中的 CSS 是什么，但要查看它的工作原理，只需将其设置为 overflow: visible

这可能是一种解决方法，因为它可能会导致其他地方出现问题。

要以正确的方式解决它，容器需要让其子级参与布局流程（例如：不做位置：绝对或浮动：右/左）。

Answer 2

问题似乎出在容器中（div.main-menu）。它的定位是固定的，没有高度或宽度。

尝试为其添加高度和宽度。

#header-wrapper .navbar .container-fluid .navbar-collapse {
    height: 100%;
    width: 100%;
}

这对我有用。