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

【问题标题】：Hide menu when clicked on (tablet) [closed]单击（平板电脑）时隐藏菜单[关闭]
【发布时间】：2018-06-09 01:49:52
【问题描述】：

我制作了一个小型网站菜单：http://website.coathings.nl/（在调整窗口大小时查看）。在桌面上工作正常，但当我在手机或平板电脑上点击时我需要消失。而且我不知道怎么...

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

【问题讨论】：

为了让我们更好地帮助您，请更新您的问题，以便它在stackoverflow.com/help/mcve 最小、完整且可验证的示例中显示您的相关代码。如果您可以让我们知道您到目前为止meta.stackoverflow.com/questions/261592 尝试解决您的问题，这也会很有帮助。如需更多信息，请参阅关于stackoverflow.com/help/how-to-ask如何提出好问题的帮助文章。

标签： css wordpress menu toggle

【解决方案1】：

你的菜单有 "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

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

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

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

}

【讨论】：

当我点击图标时它已经出现了，但是当我再次点击图标（或菜单项）时它不会消失。而且我真的不知道如何让它发挥作用。
检查上面添加的js逻辑。
谢谢，这对我帮助很大！当我单击菜单项时：菜单打开。当我再次点击时：菜单关闭。

【解决方案2】：

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

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

【讨论】：