響應菜單 - 防止懸停，使用點擊，而不是

Question

我已經建立了一個網站，我一直工作在一個負責任的菜單。

我遇到的問題是，在iPhone和所有iOS設備，如果UL有一個孩子，這是一種治療，作爲一個懸停，使菜單completley無法使用。

我使用Drop-Down Menu Navigation: Touch Friendly

我創建了一個jsFiddle

我的CSS：

#nav 
{ 
    margin-top: 35px; 
    margin-bottom: 10px; 
} 

#nav > a 
{ 
    display: none; 
} 

#nav li 
{ 
    position: relative; 
    list-style: none; 
    line-height: 54px; 
} 

#nav li a 
{ 
    font-size: 16px; 
    color: #424242; 
    padding-bottom: 2px; 
    display: block; 
} 

#nav li a:hover { 
    color: #c55102; 
} 

/* first level */ 

#nav > ul 
{ 
    position: relative; 
} 

#nav > ul > li 
{ 
    height: 100%; 
    float: left; 
    list-style: none; 
    display: inline; 
    margin-right: 30px; 
    position: relative; 
} 

#nav > ul > li:hover { 
    background: url(../img/icons/icon-nav-arrow.png) no-repeat bottom; 
} 

#nav ul li:last-child { 
    margin-right: 0; 
} 

#nav ul li.current_page_item a { 
    color: #c55102; 
    border-bottom: 2px solid #c55102; 
} 

#nav li.current_page_item ul li a { 
    border-bottom: none; 
} 

#nav > ul > li > a 
{ 
    font-size: 14px; 
} 

#nav > ul > li:hover > a, 
#nav > ul:not(:hover) > li.active > a 
{ 
    text-decoration: none; 
} 


/* second level */ 

#nav li ul 
{ 
    background-color: #D1D1D1; 
    display: none; 
    position: absolute; 
    top: 100%; 
    width: 300px; 
    z-index: 99999; 
} 

#nav li ul li { 
    border-bottom: 1px solid #c55102; 
    line-height: 40px; 
} 

#nav li ul li a { 
    padding-left: 10px; 
    padding-right: 10px; 
    font-size: 13px; 
    color: #424242 !important; 
} 

#nav li ul li:last-child { 
    border-bottom: none !important; 
} 

#nav li:hover ul 
{ 
    display: block; 
    left: 0; 
    right: 0; 
} 

#nav li:not(:first-child):hover ul 
{ 
    left: -15px; 
} 

#nav li ul a:after { 
    content: ""; 
} 

#nav li ul li a:hover, 
#nav li ul:not(:hover) li.active a 
{ 
    text-decoration: none; 
} 


@media only screen and (max-width: 800px) 
{ 
    #nav 
    { 
     position: relative; 
     top: auto; 
     left: auto; 
     width: 100%; 
    } 

    #nav > a 
    { 
     background: url(../img/icons/icon-nav.png) no-repeat 2% center #D1D1D1; 
     width: 100%; 
     height: 3.125em; /* 50 */ 
     text-align: left; 
     text-indent: 55px; 
     margin-bottom: 10px; 
     color: #424242; 
     text-transform: uppercase; 
     line-height: 40px; 
     position: relative; 
    } 

    #nav:not(:target) > a:first-of-type, 
    #nav:target > a:last-of-type 
    { 
     display: block; 
    } 


    /* first level */ 

    #nav > ul 
    { 
     background: #D1D1D1; 
     height: auto; 
     display: none; 
     position: absolute; 
     left: 0; 
     right: 0; 
     margin-top: -10px; 
    } 

    #nav ul li.current_page_item a { 
     border-bottom: 1px solid #c55102; 
    } 

    #nav ul li:last-child { 
     border-bottom: none; 
    } 

    #nav li a:after { 
     content: ""; 
    } 

    #nav li ul { 
     width: 100%; 
    } 

    #nav li ul li { 
     border-bottom: none; 
     padding-left: 0; 
    } 

    #nav:target > ul 
    { 
     display: block; 
     position: relative; 
    } 

    #nav > ul > li 
    { 
     display: block; 
     width: 100%; 
     float: none; 
    } 

    #nav > ul > li > a 
    { 
     height: auto; 
     text-align: left; 
     border-bottom: 1px solid #c55102; 
     padding: 0 0.833em; /* 20 (24) */ 
    } 

    #nav > ul > li:not(:last-child) > a 
    { 
     border-right: none; 
    } 

    /* second level */ 

    #nav li ul 
    { 
     position: static; 
     padding: 1.25em; /* 20 */ 
     padding-top: 0; 
    } 
} 

有當導航懸停（在小屏幕設備）的任何方式，它需要點擊打開它的子​​菜單？我願意在CSS或jQuery中做到這一點，無論需要什麼。

感謝

Answer 1

切勿變化<a>行爲。 <a>應始終使用時點擊，不擴大的孩子<ul>將您重定向到一個頁面。創建一個按鈕或旁邊<a>任何具有對<li>絕對/相對位置，並確保它有體面的填充和較高的Z（除<a>）更容易點擊。該按鈕將成爲父母的孩子ul的擴展觸發器。

之後：

$(".button").click(function(){ 
    $(this).next('ul').css('display','block'); 
}); 

這將使到按鈕所做的任何點擊都將擴大<ul>

至於「只會使情況變得更小的屏幕上這樣做」只是隱藏的按鈕更大的屏幕

以後我會編輯你的搗鼓這個解決方案的實施

---

更新

這裏是fiddle，對不起，我決定從頭開始創建它，而不是編輯，以保持它的簡單。調整結果窗口的大小以使按鈕顯示。否則，該按鈕將被隱藏，並且默認的懸停操作仍在使用中。希望它能幫助:)