单击时隐藏菜单（平板电脑）[关闭]

Posted 2021-05-01

我做了一个小网站菜单：http://website.coathings.nl/（调整窗口大小时看到它）。在桌面上工作正常，但当我点击手机或平板电脑时，我需要消失。我无法弄清楚如何......

它需要在菜单打开时隐藏，然后单击菜单图标，菜单项或其他位置。当你点击图标（当它关闭时）它需要打开。

答案

您的菜单中有“主导航”类

在CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries中使用媒体查询

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

手机通常在横向模式下最大宽度为640px。因此，对于纵向和横向模式，媒体查询将起作用。

您可以在移动视图上显示该图标。将单击事件应用于图标说明并将菜单的显示属性从无切换到阻止，反之亦然。

    @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");
    }

}

另一答案

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

考虑到这是WP，你最好通过创建一个子主题并从那里编辑CSS来实现。你可以在wp-content/看到你的主题