Question

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

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

我正在使用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，抱歉，我决定从头开始创建它而不是编辑以保持简单。将结果窗口调整为较小以使按钮显示。否则，该按钮被隐藏，默认悬停操作仍在使用中。希望它有所帮助：）

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

1 个答案: