Question

我已经使用css创建了一个下拉菜单，现在尝试通过将悬停功能更改为onclick来将其转换为可在移动设备上使用。

我在这里还看到了一些其他示例，说明了如何实现此目标，但是我的JavaScript知识非常有限，因此我在尝试实施建议时遇到了麻烦。

这是我正在使用的CSS代码，用于显示菜单项。

#submenu-1 li:hover>ul {
visibility: visible;
opacity: 1;
max-height: 700px;
transition: opacity 0.5s ease-in;
}

有什么想法吗？

谢谢山姆

Answer 1

您最好的选择是让CSS处理：hover事件，然后使用媒体查询检查英亩大小并相应地关闭悬停。完成此操作后，为该部分编写js，以更改innerHTML使其与所需内容匹配。

如果愿意，可以编写两个不同的菜单，然后使用CSS中的display：none属性隐藏移动菜单。这样，您就可以拥有所需的菜单。

Answer 2

您可以像这样使用“ touchstart”事件

$('#submenu-1 li').on('touchstart',function(){
    $('ul',this).css({
         "visibility": "visible",
         "max-height": "700px"
    });
    $('ul',this).animate({opacity:1},5000);
});

Answer 3

您可以使用来检查手机 screen.width 检查是否小于450px，如果是，则 $('#submenu-1 li').attr('onClick','yourfunction()')

将：hover菜单转换为onclick以在移动设备上使用

3 个答案: