Question

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

我可以点击按钮然后菜单会显示＆amp;在展示后立即隐藏。

我使用了大量的解决方案和修复，在bootstrap.js中禁用touchstart或更改navbar的z-index。。。但是对于这个问题它无论如何都不会帮助我。

单击切换按钮后菜单似乎显示但我看不到任何内容。关闭菜单时，我必须再次触摸切换按钮。再次触摸再次打开菜单。

的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.main-menu）。它的位置固定，没有高度或宽度。

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

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

这对我有用。

Answer 2

看看

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

尺寸几乎为零，身高= 1px。由于它包含菜单，因此不会显示任何内容。

我不知道CSS会在那里发生什么，但要看到它正常工作，只需将其设置为溢出：可见

这可能是一种解决方法，因为它可能会在其他地方引起问题。

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

下拉菜单切换不在iPhone上工作

2 个答案: