菜单悬停效果，在移动设备上如何实现？

Question

我正在使用Bootstrap 3。 我有这个菜单，只有在不是触摸设备（移动设备）时才能正常工作：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#ayuda">Ayuda</a></li>
        <li><a href="javascript:;">Metodología<span></span></a>
            <div class="nav-sub-menu">
                <ul class="text-submenu">
                    <li style="padding-left=0px"><a href="#guia-metodologica">Guía Metodológica</a></li>
                    <li style="padding-left=0px"><a href="#modelos-y-resultados">Modelos y Resultados</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#glosario">Glosario</a></li>
        <!--<li><a href="#link-de-interes">Link de Interés</a></li>-->
        <li><a href="#contacto">Contacto</a></li>
    </ul>
</div>

在CSS中，赋予元素样式的鼠标悬停效果代码如下：

.nav li > a {
    display: table-cell;
}
.nav>li>a:hover {
    background: none;
    color: #ff7113;
}
.nav > li > ul {
    display:none;
    list-style:none;
    position:relative;
}
.nav > li:hover > ul {
    display:block;
}

我看过一些关于如何制作适用于桌面和触摸屏的无需悬停的菜单的帖子，有人使用JavaScript甚至使用外部库。有没有更简单的方法在移动设备上使用这个菜单？

我在Jsfiddle上制作了一个可以工作的菜单：

https://jsfiddle.net/esqkx349/

你需要在宽屏幕下打开它才能看到，就像这样:

- pmiranda

Answer 1

如果有人仍在寻找解决此问题的方法，

请在 <div class="navbar-collapse collapse"> 中添加 onclick="void(0)" ，以使移动设备将元素识别为具有悬停效果的元素。

例如：<div class="navbar-collapse collapse" onclick="void(0)">

- Prem popatia

Answer 2

可以在没有Js的情况下制作可点击的下拉菜单。

悬停方法不太可靠，因为一些触摸设备会将第一次点击视为悬停操作。

可以使用复选框html元素来实现。然后，css可以检测复选框是否被选中。

我创建了一个组件，使用此链接完成工作。在移动设备上运行得相当好，因为点击事件正常工作。

纯CSS可点击下拉菜单？

问题是，这种解决方案有点hacky和纯HTML，CSS实现无法在HTML层次结构之外工作。（因此，如果您的按钮和下拉菜单存在于HTML层次结构的不同分支中，则无法工作。）

我认为最合适的解决方案是使用一点JS并处理元素的点击事件。

- Taylor Coon

Answer 3

好的，我做到了：

https://jsfiddle.net/pmiranda/bwkyocpa/1/

我必须放置一些JavaScript和CSS：

function isTouchDevice(){
        return typeof window.ontouchstart !== 'undefined';
    }

    $(document).ready(function(){
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
        if(isTouchDevice()) {
            // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
            $(".navbar-nav > li > a").click(function(event) {
            // Perform a reset - Remove the "clicked" class on all other menu items
                $(".navbar-nav > li > a").not(this).removeClass("clicked");
                $(this).toggleClass("clicked");
                if ($(this).hasClass("clicked")) {
                event.preventDefault();
                }
            });
        }
    });

CSS：

.hover-hack {
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}
@media only screen and (max-width:1024px) {
    .hover-hack {
        background: rgba(0, 0, 0, 1) !important;
        z-index: 10;
    }
}

还有HTML代码：

<li><a href="javascript:;">Metodología<span></span></a>
    <ul class="text-submenu hover-hack">
        <li style="padding-left=0px"><a href="#guia-metodologica" style="font-size:13px;">Guía Metodológica</a></li>
        <li style="padding-left=0px"><a href="#modelos-y-resultados" style="font-size:13px;">Modelos y Resultados</a></li>
    </ul>
</li>
<li><a href="#glosario">Glosario</a></li>

- pmiranda