Question

我使用嵌套列表作为带有子菜单项的菜单。我曾经这样做，如果你徘徊在主菜单项上，子菜单项将通过将显示从none更改为block来显示。我决定使子菜单看起来好像它们正在下降并使用CSS转换。

我遇到的问题是，在第一种方法中，如果您触摸iPad上的主菜单项，子菜单将会显示，您将再次触摸它以关注链接。使用新方法，它遵循iPad上的链接，您无法看到子菜单。

下面没有任何内容的菜单（子菜单项和没有子菜单项的主菜单项）有一个类，而下面有子菜单的主菜单项有不同的类。

我有什么方法可以设置它，以便将鼠标悬停在菜单上会显示桌面上的子菜单项，点击会跟随链接，而触摸iPad上的主菜单项会跟随链接，如果没有子菜单项，但在第二次触摸时按照链接显示子菜单的第一次触摸时显示子菜单？

    <div id="menu">
    <div class="mainmenu">
         <ul>
            <li class='menu_child'>
                <a href=''>Home</a>
            </li>
            <li class='menu_child'>
                <a href=''>Blog</a>
            </li>
            <li class='menu_parent'>
                <a href=''>Contact Us</a>
                <ul>
                    <li>
                        <a href='' >Find Us</a>
                </li>
                <li>
                    <a href='' >About Us</a>
                </li>
                <li>
                    <a href='' >Meet the Team</a>
                </li>
            </ul>
        </li>
        <li class='menu_parent'>
            <a href=''  >Adventure</a>
            <ul>
                <li>
                    <a href='' >Adventurer Grandmaster</a>
                </li>
            </ul>
        </li>
        <li class='menu_child'>
            <a href='' >Guilds</a>
        </li>
        <li class='menu_parent'>
            <a href='' >Trade</a>
            <ul>
                <li>
                    <a href='' >Moonsea</a>
                </li>
                <li>
                    <a href='' >Hillsfar</a>
                </li>
                <li>
                    <a href='' >Femphrey</a>
                </li>
                <li>
                    <a href='' >Anvil</a>
                </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

第一种方法

    .mainmenu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1001;
display: none;
}

.mainmenu ul li:hover ul, .mainmenu li.over ul {
display: block;
}

第二种方法

.mainmenu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1001;
    height: auto;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.3s ease-in;
    -moz-transition: max-height 0.3s ease-in;
    -o-transition: max-height 0.3s ease-in;
    -ms-transition: max-height 0.3s ease-in;
    transition: max-height 0.3s ease-in;
}

.mainmenu ul li:hover ul, .mainmenu li.over ul{
max-height: 999px;
-webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
    -ms-transition-duration:1s;
    transition-duration:1s;
}

我已将焦点和活动伪类添加到悬停位。

我愿意使用JavaScript，但我宁愿使用CSS，最好不要更改HTML。我愿意使用PHP作为最后的手段。

Answer 1

<强> http://jsbin.com/cilapi/2/

诀窍是使用移动设备上的CSS .menu_parent <来强制阻止任何a元素的第一个内部pointer-events: none;锚定点击 / p>

@media (max-width: 768px)  { /* Small devices */

  li.menu_parent > a {    // If LI element is parent to a submenu
    pointer-events: none; // prevent it's immediate A child to follow HREF
    cursor: default;     
  }

}

:hover仍然可以在大屏幕上正常工作，点击后会有一个链接在较小的@media设备上，任何.menu_parent个父元素都会在其>直接a子节点上禁用点击，允许子菜单打开（而不是触发HREF遵循）

停用主播菜单点击移动设备

1 个答案: