禁用移动设备上的锚点菜单点击

Question

我将嵌套列表用作带有子菜单项的菜单。我曾经这样做，如果您将鼠标悬停在主菜单项上，则通过将显示从无更改为阻止来显示子菜单项。 我决定让子菜单看起来像是在下拉并使用 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/

诀窍是防止点击在任何 .menu_parent 元素的第一个内部 a 锚点上使用 CSS pointer-events: none;在移动设备上

@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 跟随）