首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >单击“外部区域”时关闭移动菜单

单击“外部区域”时关闭移动菜单
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

复制
相关文章
python读取txt文件中的数组
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139543.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/23
4K0
OpenCV中图像的读取,显示与保存
相关函数:cv2.imread()、cv2.imshow()、cv2.imwrite()
py3study
2020/01/19
2.9K0
如何同时从多个文本文件读取数据
在很多时候,需要对多个文件进行同样的或者相似的处理。例如,你可能会从多个文件中选择数据子集,根据多个文件计算像总计和平均值这样的统计量。当文件数量增加时,手动处理文件的可能性会减小,出错的概率会增加。
TalkPython
2019/05/24
3.9K0
OpenCV中如何读取URL图像文件
最近知识星球收到的提问,觉得是一个很有趣的问题,就通过搜集整理归纳了一番,主要思想是通过URL解析来生成数据,转为图像/Mat对象。但是在Python语言与C++语言中的做法稍有不同。
OpenCV学堂
2019/07/19
5.9K0
如何利用C/C++逐行读取txt文件中的字符串(可以顺便实现文本文件的复制)
本文代码都在Windows/VC++6.0下测试过, 在linux/g++下也没有问题。
全栈程序员站长
2022/09/05
4.3K0
Python Numpy 从文件中读取数据
测试文件内容(test1.txt) hello,123,nihao 8,9,10 io,he,no 测试代码 import numpy # dtype:默认读取数据类型,delimiter:分隔符 world_alcohol = numpy.genfromtxt("test1.txt", dtype=str, delimiter=",") # 数据结构 print(type(world_alcohol)) # 数据内容 print(world_alcohol) # 帮助文档 print(help(nump
山海散人
2021/03/03
4.2K0
TensorFlow中读取图像数据的三种方式
从tesorflow1.11之后,(大概是这个版本号),谷歌推出了tf.data模块来读取数据,甚至在tensorflow2.0中,取消了数据队列管道,所以我建议大家学习tf.data模块。未来我也会做详细的tf.data模块使用说明。
狼啸风云
2020/12/29
7520
进程中的数据读取和修改
// 获取窗口句柄 HWND hFindWnd = ::FindWindow(NULL, “[窗口标题]”);
ClearSeve
2022/02/16
8580
C#读取文本文件和C# 写文本文件
今天一个学生问我如何从一个文本中读取内容,如下是做的是控制台中的例子,在别的地方也是这个道理。
阳光岛主
2019/02/19
3.5K0
TypeScript中的数组和元组
TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。
玖柒的小窝
2021/11/16
2.2K0
TypeScript中的数组和元组
Java中的数组和集合
这创建了一个名为 array 的整型数组,该数组有 5 个元素。可以使用下标访问数组中的元素,例如:array[0] 表示第一个元素,array[1] 表示第二个元素,以此类推。数组下标从 0 开始,因此最后一个元素的下标是 array.length - 1。
小尘要自信
2023/10/10
2710
Golang中的数组和切片
(2)数组是值类型,将一个数组赋值给另一个数组时,会将所有的元素进行复制;切片是引用类型,将一个切片赋值给另一个切片时,它们将共享底层数组。
周小末天天开心
2023/10/16
1820
按出现次数从少到多的顺序输出数组中的字符串
问题 有一个数组为{"Liu Yi", "Chen Er", "Zhang San", "Chen Er", "Chen Er", "Li Si", "Li Si", "Wang Wu"}, 要求: (1)把数组中没重复的字符串按原先的先后顺序打印出来 (2)把数组中有重复的字符串,按出现次数从少到多的顺序打印出来,每个字符串只打印一次 思路 C++中,vector按先后顺序存储数据,因此可把没重复的字符串按顺序存到vector中。 map默认是按key从小到大的顺序存放数据,所以可把有重复的数据存到map
海天一树
2018/04/17
2.5K0
用Pandas从HTML网页中读取数据
本文,我们将通过几步演示如何用Pandas的read_html函数从HTML页面中抓取数据。首先,一个简单的示例,我们将用Pandas从字符串中读入HTML;然后,我们将用一些示例,说明如何从Wikipedia的页面中读取数据。
老齐
2020/05/15
9.6K0
用Pandas从HTML网页中读取数据
java中怎么输入数组_java中如何从键盘输入数组
java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入。
全栈程序员站长
2022/09/13
4K0
Java 读取文本文件
我想用Java 读取文本文件(txt)中的字符,但是对Java的文件操作不怎么熟悉,于是开始翻官方文档,解决了如何从文件中读取一行或者全部数据的问题。
全栈程序员站长
2022/06/25
1.8K0
Java 读取文本文件
C#中的多维数组和交错数组
C#中有多维数组和交错数组,两者有什么区别呢! 直白些,多维数组每一行都是固定的,交错数组的每一行可以有不同的大小。 以二维的举例,二维数组就是m×n的矩阵,m行n列;而交错数组(又叫锯齿数组
卡尔曼和玻尔兹曼谁曼
2019/01/22
2.9K0
C#中的多维数组和交错数组
leetcode:1408. 数组中的字符串匹配
给你一个字符串数组 words ,数组中的每个字符串都可以看作是一个单词。请你按 任意 顺序返回 words 中是其他单词的子字符串的所有单词。
冷环渊
2021/12/12
2.2K0
C++中的数组和字符串,strlen函数,iostream头文件
C++语法是在C语言的基础上发展而来的,被称为“带类的C”,兼容C语言语法。本文介绍数组和字符串的基本知识。
全栈程序员站长
2022/07/23
2K0
点击加载更多

相似问题

从文本文件中读取和写入字符串

2111

从文本文件中读取和显示字符串

10

从文本文件中读取np数组

315

如何从文本文件中读取数组?

48

如何从文本文件中读取和添加数组中的数字

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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