下拉菜單切換不適用於 iPhone

Question

我有下面的菜單 + 切換按鈕在 Android 上的任何瀏覽器上都很好用，但是 iOS....

我可以單擊按鈕，然后菜單將在顯示后立即顯示和隱藏。

我使用了很多解決方法和修復方法，在 bootstrap.js 中禁用 touchstart 或更改導航欄的 z-index。 . . 但無論如何它都無法幫助我解決這個問題。

單擊切換按鈕后，菜單似乎出現了，但我什么也看不到。 我必須再次觸摸切換按鈕以關閉菜單並再次觸摸以再次打開菜單。

如果你有 iPhone，你可以在http://getheadsup.com/檢查一下

謝謝你關心我的問題。

 <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在里面，但是要看到它正常工作，只需將其設置為溢出即可：

那可能是一種解決方法，因為它可能在其他地方引起問題。

為了以正確的方式解決此問題，容器需要讓其子級參與布局流程（例如：不執行position：absolute或float：right / left）。

Answer 3

我在 IOS 遇到了同樣的問題，我通過以下方式修復了它：

將按鈕 class“折疊”更改為 jquery 代碼：

$('your_section_class').toggleClass('collapse')

最好的祝福。