CSS選單在iPad / iPhone上無法運作

Question

我剛剛建立了我的第一個響應式網站，但我面臨的一個問題是，CSS下拉菜單可在android和Chrome的仿真程序上運行，而在iPhone或iPad的safari中則無法運行。 這里是工作副本的鏈接，下面是代碼：

的HTML

<nav role="navigation" id="top-nav" class="floatRight">
    <div class="nav top-nav cf">
        <ul>
            <li class="page_item page-item-25 current_page_item"><a href="http://phily245.me.uk/gibson/">Home</a></li>
            <li class="page_item page-item-35"><a href="http://phily245.me.uk/gibson/contact/">Contact Us Now</a></li>
            <li class="page_item page-item-37"><a href="http://phily245.me.uk/gibson/services/">Services</a></li>
            <li class="page_item page-item-41"><a href="http://phily245.me.uk/gibson/gallery/">Gallery</a></li>
        </ul>
    </div>
</nav>

的CSS

#top-nav {
    margin-top: 60px;
    z-index:200;
}

#top-nav li {
    float: left;
    background-image: none;
    padding-left: 0;
}

#top-nav li a {
    font-size: 14px;
    padding: 8px 12px;
    color: #797f94;
    display: block;
}

#top-nav li:hover {
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #2AA6FF),
    color-stop(1, #1E8AD7)
    );
    background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
    border-radius: 5px;
}

#top-nav li:hover a {
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
Tablet changes
========================================================================== */

@media screen and (min-width: 640px) and (max-width: 1024px)  {  

#top-nav {
    width: 70px;
    border-radius: 3px;
    position: absolute;
    right: 20px;
    z-index: 300;
}

#top-nav::before {
    content: "Menu";
}   

#top-nav ul {
    width: 100%;
}

#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
    z-index: 400;
    display: block;
}

#top-nav li {
    background-image: none;
    position: relative;
}

#top-nav li:hover {
    background-image: none;
}

}


/* ==========================================================================
Tablet & mobile changes
========================================================================== */

@media screen and (max-width: 1024px) {

#top-nav {
    padding: 8px 12px;
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #2AA6FF),
    color-stop(1, #1E8AD7)
    );
    background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
    background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}

#top-nav li a {
    color: #ffffff;
}

#top-nav::before {
    color: #ffffff;
    background-image: url(../images/menu.gif);
    background-position: 0% 3px;
    background-repeat: no-repeat;
    padding-left: 29px;
}

#top-nav li:hover a {
    color: #ffffff;
    text-decoration: underline;
}

#top-nav div {
    display: none;
}

#top-nav:hover div {
    /*position: absolute;*/
}

#top-nav:hover {
    height: 210px;
}

}

/* ==========================================================================
Mobile changes
========================================================================== */

@media screen and (max-width: 639px) {

#top-nav {
    margin-top: 0;
    overflow: hidden;
    float: none;
}

#top-nav::before {
    content: "J Gibson Electrical";
    font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
    font-weight: bold;
}

#top-nav ul {
    width: 100%;
}

#top-nav li {
    clear: left;
}

#top-nav:hover div {
display: block;
}

#top-nav li:hover, #top-nav li:focus  {
background-image: none;
}

}

解

正如公認的答案所說，JavaScript是解決方案。 這是我的解決方案：

//This goes in an onload or onresize event
if(viewportWidth <= 1024)
    $("#top-nav").click( function() {
        toggleMenu();
    });
}

function toggleMenu()
{

    menuItems = $("#top-nav div");
    if(menuItems.css("display") == "none")
    {
        menuItems.css({
            "display": "block"
        });
    }
    else
    {
        menuItems.css({
            "display": "none"
        });
        $("#top-nav").css({
            "height": "auto"
        });
    }           
}

Answer 1

hover狀態在啟用觸摸的設備上不起作用。 您將不得不在js使用touch events ，或者僅是常規click事件。

Answer 2

問題在於您無法在iPad上“懸停”，您必須使用js onclick事件和樣式來使它們在點擊時下降。 以下是一些可能有用的鏈接： https : //developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent http://www.w3schools.com/jsref/prop_style_width.asp

我遇到了同樣的問題，因此我決定使用幻燈片菜單http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Answer 3

您好菲爾，您需要使用其他偽選擇器檢查以下stackoverflow post ：touch CSS偽類或類似的東西嗎？

塞布

Answer 4

發現了與該主題相關的另一個問題，我認為我會發布該問題以供將來參考。

問題> Dropdown在Safari Mobile之外的所有瀏覽器中均有效。

將問題跟蹤到沒有href元素的A標簽。 這似乎只是Safari移動版上的一個問題。 如果沒有href標簽，則該元素不會被視為可點擊元素。

干杯!