悬停菜单，如何在移动设备中使用？

Posted 2023-03-06

【中文标题】悬停菜单，如何在移动设备中使用？

【英文标题】：Menu with hover, how to do it work in mobile?

【发布时间】：2017-07-15 14:10:24

【问题描述】：

我正在使用 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/

你必须在宽屏中打开它才能看到它，像这样：

【参考方案1】：

以防万一，任何人仍在寻找解决此问题的方法，

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

点赞<div class="navbar-collapse collapse" onclick="void(0)">

【参考方案2】：

好吧，我做到了：

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>

【参考方案3】：

不用Js也可以做一个可点击的下拉菜单

悬停方法是粗略的，因为一些触摸设备会将第一次点击视为悬停动作。

可以使用复选框 html 元素来完成。然后，css 可以检测当前复选框是否被选中。

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

Pure CSS clickable dropdown?

问题是，这个解决方案有点 hacky 和纯 HTML，CSS 实现不能在 HTML 层次结构之外工作。（所以如果你的按钮和下拉菜单存在于 html 层次结构的不同分支中，它将无法工作。 )

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