禁用移动设备上的锚菜单单击 [英] Disable anchor menu click on mobile devices

问题描述

我正在使用嵌套列表作为带有子菜单项的菜单.我曾经这样做过，如果您将鼠标悬停在主菜单项上，则子菜单项会通过将显示从无更改为块来显示.我决定使子菜单看起来像是在下拉菜单并使用CSS过渡.

I'm using a nested list as a menu with sub menu items. I used to do it where if you hovered over main menu item, the sub menu items would appear by changing the display from none to block. I decided to make the sub menus looks as if they were dropping down and used CSS transitions.

我遇到的问题是，在第一种方法中，如果您触摸iPad上的主菜单项，则会显示子菜单，然后再次触摸该子菜单以跟随链接.使用新方法，它会遵循iPad上的链接，您不会看到子菜单.

The problem I have is that in the first approach if you touched a main menu item on an iPad the sub menu would display and you would touch it again to follow the link. With the new approach it follows the link on the iPad and you don't get to see the sub menu.

下面没有任何菜单的菜单(子菜单项和没有子菜单项的主菜单项)具有一类，而下面具有子菜单的主菜单项具有不同的类.

The menus that have nothing below them (sub menu items and main menu items with no sub menu items) have one class while the main menu items with a sub menu below them have a different class.

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

Is there any way I can set it so that hovering over the menu would show the sub menu items on a desktop and clicking would follow the link while touching a main menu item on an iPad would follow the link if there was no sub menu items but follow the link on a second touch and show the sub menu on the first touch when there is a sub menu?

    <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;
}

我已经将焦点和活动伪类添加到了悬停位上.

I've adding focus and active pseudo-classes to the hover bit.

我愿意使用JavaScript，但我更希望使用CSS，最好不要更改HTML.我愿意将PHP作为最后的选择.

I'm willing to use JavaScript but I'd rather do it with CSS, preferably without changing the HTML. I'm willing to use PHP as a last resort.

推荐答案

http://jsbin.com/cilapi/2/

http://jsbin.com/cilapi/2/

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

The trick is to prevent a click on any .menu_parent element's first inner a anchor using CSS pointer-events: none; on mobile

@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跟进)

:hover will still work as usual on larger screens and a click will follow a link.
On smaller @media devices - any element that is .menu_parent parent will have clicks disabled on it's > immediate a child, allowing the sub menu to open (instead of triggering the HREF follow)

这篇关于禁用移动设备上的锚菜单单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！