Css 带有悬停的菜单，如何在手机中工作？

我用的是bootstrap3。我有一个菜单，只有当不是触摸（移动）设备时才正常工作：

我读过一些关于使用javascript甚至使用外部库为桌面和触摸屏制作无悬停菜单的帖子。有没有更简单的方法在移动设备中使用此菜单

我和工人们打了个招呼：

您必须在大屏幕上打开它才能看到它，如下所示：

嗯，我做到了：

我必须添加一些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:

以及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>

如果任何人仍在寻找解决此问题的方法

在

中添加onclick=“void（0）”以使移动设备将元素识别为带有悬停的元素

---

像

一样，可以在没有Js的情况下制作一个可点击的下拉列表

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

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

我创建了一个使用此链接执行此任务的组件。它在移动设备上工作得相当好，因为点击事件工作得很好

问题是，这个解决方案有点粗糙和纯粹的HTML，CSS实现在HTML继承权之外无法工作（因此，如果您的按钮和下拉菜单存在于HTML继承权的不同分支中，它将无法工作）

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

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

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

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