单击时隐藏菜单（平板电脑）

Question

我制作了一个小网站菜单：http://website.coathings.nl/（调整 window 大小时可以看到）。在台式机上运行良好，但在 phone 或平板电脑上单击时我需要消失。我不知道怎么...

当菜单打开并且您单击菜单图标、菜单项或其他地方时，它需要隐藏。并且它需要在您单击图标时打开（当它关闭时）。

Answer 1

您可以使用 CSS 媒体查询来定位特定设备宽度以定位平板电脑用户并从那里更改 CSS 样式。

考虑到这是 WP，您最好创建一个子主题并从那里编辑 CSS。您可以在 wp-content/

中查看您的主题

Answer 2

您的菜单有 class "main-navigation"

在 CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

中使用媒体查询

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

移动设备 phone 通常在横向模式下的最大宽度为 640 像素。因此，对于下面的纵向和横向模式，媒体查询将起作用。

您可以在移动视图中显示图标。对图标应用点击事件说并将菜单的显示属性从 none 切换为阻止，反之亦然。

    @media only screen and (max-width: 640px) {
.icon{display:block;}
    .main-navigation { display:none }
    }

例如：假设您在点击事件上调用了一个函数。检查菜单是否隐藏或可见，并根据您隐藏显示菜单。

function showMenu(){ //using jquery
    if($(".main-navigation").css("display") != "none"){
         $(".main-navigation").css("display","none")
    }else{
         $(".main-navigation").css("display","block");
    }

}

单击时隐藏菜单（平板电脑）

Hide menu when clicked on (tablet)

css

wordpress

menu

toggle