Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >单击“外部区域”时关闭移动菜单

单击“外部区域”时关闭移动菜单
EN

Stack Overflow用户
提问于 2018-02-15 01:13:38
回答 3查看 2K关注 0票数 1

如果我问了同样的问题,我很抱歉,但我已经尝试过任何解决办法,但我仍然没有任何东西给我。和标题一样,当我点击区域菜单的外部时,我想关闭移动菜单。这是我使用切换按钮时的jquery

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.mobile-nav-toggler').click(function() {
    $('.mobile-nav-overlay').fadeToggle(200)
    $('.mobile-nav-toggler').toggleClass('active')
    $('body').toggleClass('mobile-nav-opened')
  });

移动导航覆盖是层菜单。有人能帮我吗?谢谢

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-02-15 01:33:02

之后,移动菜单将被点击,它将打开,在这个菜单下添加100%的宽度和高度和不透明度将是你所需要的。在此之后,添加另一个脚本,它将显示:单击..div it时关闭菜单

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.new-div-under-menu').click(function() {
     $('.menu').hide() // or removeClass, or toggle or something
     $('.new-div-under-menu').hide()
});
票数 0
EN

Stack Overflow用户

发布于 2018-02-15 01:56:25

像这样简单的东西应该会起作用:基本上,在页面上的任何点击(html单击)上,它都会检查主体是否有类“移动导航打开”(只有在打开菜单时才存在),所以如果是这样的话,您可以将菜单隐藏在这里。

只要您单击nav容器(我的示例中的“.”),此事件就不会发生。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('html').click(function() {
    if ($('body').hasClass('mobile-nav-opened')){
        // Hide your menu here
    }
});

// replace mobile-nav with your entire nav container
$('.mobile-nav').click(function(e){
    e.stopPropagation();
});
票数 0
EN

Stack Overflow用户

发布于 2018-02-15 02:45:33

我们可以使用以下代码来完成这个任务:

Note:带有红色背景的“mobile”文本显示移动菜单是“Off”;“绿色背景”显示的是“On”。

在本例中,return false在toggler方法> mobileMenuToggle中非常重要。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function() {
  mobileMenuToggle();
  closeMobileMenu();
});

function mobileMenuToggle() {
  $('.mobile-nav-toggler').click(function() {
    $(this).toggleClass('active');
    $('body').toggleClass('mobile-nav-opened');
    return false;
  });
}

function closeMobileMenu() {
  $('html').click(function() {
    $('.mobile-nav-toggler').removeClass('active');
    $('body').removeClass('mobile-nav-opened');
  });
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.mobile-nav-toggler {
  cursor: pointer;
  background: red;
  color: white;
  padding: 20px 30px;
  display: inline-block;
}

.mobile-nav-toggler.active {
  background: green;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-nav-toggler">
  Mobile Nav Toggle
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48803539

复制
相关文章
Google Maps JSAPI V3
    1. 不再需要API Key 2. 指定sensor传感器参数,检测到用户当前位置 3. 针对移动设备(IPhone设备和Android系统)的开发 4. 支持本地化 5. 版本管理
py3study
2020/01/08
1.1K0
google maps api_js调用谷歌浏览器接口
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点:
全栈程序员站长
2022/09/20
5.7K0
与朋友分享你的位置-Google Maps with Latitude
    对于Windows Mobile平台设备的实时定位及相关服务,微软有其杀手级的Live Search Mobile(具体可以参考马宁老师的webcast:Windows Embedded CE 导航与地图平台介绍);谷歌也有Google Maps for Windows Mobile,目前推出了新的版本,只要你有google账户,就可以和其他朋友分享你的位置了。     我们可以直接在设备浏览器上去Google Maps for Windows Mobile下载并安装其应用程序。首先,我尝试了
ShiJiong
2018/01/11
1.3K0
与朋友分享你的位置-Google Maps with Latitude
springbooot使用google验证码
由于需要做一个前后端分离的项目,想着使用google验证码,由于年龄大了,这些知识啊,用完就忘,在这里记录一下。
魚迹
2023/05/06
4300
springbooot使用google验证码
免费google代理服务器_google服务器ip地址
有些朋友在登陆谷歌时遇到异常活动而出验证,但是无论怎么输入手机号谷歌都提示此手机号无法用于验证,这种问题大多人都会出现,滥用代理基本都会出现异常验证活动的.
全栈程序员站长
2022/11/11
14.5K0
免费google代理服务器_google服务器ip地址
国内使用Google reCaptcha验证码
为啥我出这篇文章呢,因为我有几天用了vaptcha进行人机验证,还算好用,但是发现手机上有广告,本着原则问题,我剔除了人机验证。 又发现在邻居@kidultff发现谷歌国内验证也可以,于是探路V3版本
一朵灼灼华
2022/08/05
4.2K0
国内使用Google reCaptcha验证码
使用Numpy验证Google GRE的随机选择算法
最近在读《SRE Google运维解密》第20章提到数据中心内部服务器的负载均衡方法,文章对比了几种负载均衡的算法,其中随机选择算法,非常适合用 Numpy 模拟并且用 Matplotlib 画图,下面是我的代码:
大江小浪
2018/07/24
8510
使用Numpy验证Google GRE的随机选择算法
[AI新知] Android版Google Maps开始支援无痕模式
Google宣称Maps用户启用无痕模式后,Google不会储存浏览/搜寻纪录以及传送通知,另一方面,由于系统不会取得位置纪录/地点资讯,用户也就无法获得个人化地图服务
阿泽
2019/11/12
5190
ASP.NET Core 使用 Google 验证码(Google reCAPTCHA)
验证码在我们实际的生活场景中非常常见,可以防止恶意破解密码、刷票、论坛灌水、刷注册等等。现在的网站基本都有使用验证码来对用户的行为进行验证。从简单的文字验证码、图片验证码、滑动验证码、图片选择验证码等,验证码一直在进化,在和“黑恶势力”做斗争。Google 验证码是 Google 提供的一项免费的验证码服务,接入非常简单,推荐用它来替换传统的图片验证码。
晓晨
2019/04/23
2.6K0
ASP.NET Core  使用 Google 验证码(Google reCAPTCHA)
使用机器学习和Google Maps对交通事故风险进行实时预测
Traffic事故是非常普遍的。如果生活在一个广阔的大都市中,那么很有可能听说,见证甚至参与其中。由于交通事故的发生频率,交通事故是造成全球死亡的主要原因,每年缩短数百万人的生命。因此,可以预测交通事故或容易发生事故的区域的系统可以潜在地挽救生命。
代码医生工作室
2019/10/15
3.6K1
使用机器学习和Google Maps对交通事故风险进行实时预测
maps
通过向 make 函数传入键和值的类型,可以创建 map。make(map[type of key]type of value) 是创建 map 的语法。
酷走天涯
2019/06/11
5580
网站如何使用Google两步验证
谷歌两步验证是Google的一种开源技术,给网站提供额外的保护,每次登录账户时,在登录后需要输入Google Authenticator给你生成的6位验证码。
Petrochor
2022/06/07
3K0
网站如何使用Google两步验证
基于python+PyQt5的Google身份验证器
1.本文学习nanhuier的博客《Python计算谷歌身份验证器的验证码》并优化其中代码。 原博客链接:https://blog.csdn.net/nanhuier/article/details/77679200 2.本文学习莫水千流的博客《程序员之路:python3+PyQt5+pycharm桌面GUI开发》, 成功搭建PyQt5+Pycharm的开发环境,建议读者先按照此文配置好环境。 原博客链接:https://www.cnblogs.com/zhoug2020/p/9039993.html 3.本文学习maicss的github工程《PyQt5-Chinese-tutorial》 github链接:https://github.com/maicss/PyQt5-Chinese-tutorial 4.本文学习晴空行的博客《Python打包方法》, 原博客链接:https://www.cnblogs.com/gopythoner/p/6337543.html
潇洒坤
2019/03/06
1.4K0
SpringMVC表单验证器的使用
本章讲解SpringMVC中怎么通过注解对表单参数进行验证。 SpringBoot配置 使用springboot, spring-boot-starter-web会自动引入 hiberante-validator, validation-api依赖。 在 WebMvcConfigurerAdapter实现类里面添加验证器及国际化指定资源文件。 @Override public Validator getValidator() { LocalValidatorFactoryBean validat
Java技术栈
2018/03/30
1.8K0
SpringMVC表单验证器的使用
PHP设置谷歌验证器(Google Authenticator)实现操作二步验证
**使用说明:**开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。
OwenZhang
2021/12/08
4.5K0
PHP设置谷歌验证器(Google Authenticator)实现操作二步验证
通过Google身份验证器加强Linux帐户安全
而后,google的验证模块就会被复制到/lib64/security目录下,而用来生成密钥的可执行程序:google-authenticator,则复制到/usr/local/bin目录下,方便调用。
流柯
2018/08/30
8530
TP6验证器的使用
4手机号码:不能为空,不能少于11个字符,不能多于11个字符,必须是数字,必须是可用的手机号码
叫我可儿呀
2019/12/05
1.8K0
如何使用 Python 验证电子邮件地址
在本文中,我将向大家展示如何使用名为 verify-email 的 Python 库构建你自己的电子邮件验证工具。
海拥
2023/02/27
2.7K0
如何使用 Python 验证电子邮件地址
两步验证杀手锏:Java 接入 Google 身份验证器实战
大家应该对两步验证都熟悉吧?如苹果有自带的两步验证策略,防止用户账号密码被盗而锁定手机进行敲诈,这种例子屡见不鲜,所以苹果都建议大家开启两步验证的。
Java技术栈
2018/09/29
5.3K0
TP6.0中的密码验证逻辑、验证器的使用
站长源码网 1. 场景一:只有一个密码框,并且是可选项,留空不修改密码,不留空则修改密码 2. 场景二:两个密码框,修改密码时有新密码、确认密码,新密码框不为空时,确认密码才验证 1. 场景一:只有一个密码框,并且是可选项,留空不修改密码,不留空则修改密码 ---- 编辑用户表单 <form action="" method="post"> 用户名 <input type="text" name="username" value="liang" readonly autocomplete="off"
很酷的站长
2023/02/17
1.7K0
TP6.0中的密码验证逻辑、验证器的使用

相似问题

Android应用:获取Google Drive API的访问令牌

23

Google Drive api Android下载Google文档文件

311

Android Google Drive Api令牌错误

11

接收访问令牌google drive api,c#

10

适用于iOS的Google drive api下载文件

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文