jquery - 响应式菜单 - 防止悬停，改用点击

Question

我为我一直在工作的网站构建了一个响应式菜单。

我遇到的问题是在 iPhone 和所有 iOS 设备上，如果 ul 有一个 child ，它会将其视为悬停并使菜单完全无法使用。

我正在使用 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>)以便于点击。此按钮将触发扩展它的父 li 子 ul。

在那之后:

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

这将使对按钮的任何点击都将展开 <ul>

至于“只让它在小屏幕上这样做”只是在大屏幕上隐藏那些按钮

我稍后会为这个解决方案的实现编辑你的 fiddle

---

更新

这里是 fiddle ，对不起，我决定从头开始创建它而不是编辑以保持简单。将结果窗口的大小调整得更小以使按钮出现。否则，该按钮将被隐藏，并且仍在使用默认的悬停操作。希望对您有所帮助:)