首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在纯javascript的外部单击移除侧边菜单

在纯 JavaScript 的外部单击移除侧边菜单,可以通过以下步骤实现:

  1. 首先,需要为侧边菜单添加一个事件监听器,以便在点击菜单项时阻止事件冒泡。这可以通过使用 addEventListener 方法来实现。例如,假设侧边菜单的 HTML 结构如下:
代码语言:txt
复制
<div id="sidebar">
  <ul>
    <li>菜单项 1</li>
    <li>菜单项 2</li>
    <li>菜单项 3</li>
  </ul>
</div>

可以使用以下代码为每个菜单项添加事件监听器:

代码语言:txt
复制
var menuItems = document.querySelectorAll('#sidebar li');
menuItems.forEach(function(item) {
  item.addEventListener('click', function(event) {
    event.stopPropagation();
  });
});
  1. 接下来,需要为页面的其他区域添加一个事件监听器,以便在点击页面其他地方时关闭侧边菜单。可以为 document 对象添加一个点击事件监听器,并在事件处理程序中检查点击事件的目标元素是否位于侧边菜单内。如果不是,则关闭侧边菜单。以下是实现该功能的代码:
代码语言:txt
复制
document.addEventListener('click', function(event) {
  var sidebar = document.getElementById('sidebar');
  var targetElement = event.target;

  if (!sidebar.contains(targetElement)) {
    // 关闭侧边菜单的逻辑
    sidebar.style.display = 'none';
  }
});

在上述代码中,我们首先获取侧边菜单的 DOM 元素,并检查点击事件的目标元素是否位于侧边菜单内。如果不是,则关闭侧边菜单。

这是一个基本的实现方法,可以根据具体需求进行修改和扩展。关于纯 JavaScript 的外部单击移除侧边菜单的完善和全面的答案,可以根据具体的应用场景和需求进行进一步的讨论和优化。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Axure实战06:创建一个AppleSymbol图标库网站

基础样式-侧边导航栏 我们先分析下AppleSymbol图标库网站结构,它由一个侧边导航栏和内容展示区组成,当我们点击侧边导航栏菜单时,右侧内容区域将展示不同内容。...交互工具栏中,我们点击“新建交互”,选择“单击时”,选择“设置选中”,选中目标“当前”,值为“真”。...这里我们用到组件叫做“内联框架”,它可以链接展示外部地址网站,也可以链接内部创建好页面。 我们这里有7个菜单,我们“页面”工具栏中先创建7个页面。...示例:当我们点击侧边导航栏“导航菜单”时,内容区域“内联框架”应该展示“导航菜单页面。...我们双击侧边导航栏进入内页,选中“导航菜单”,“交互”工具栏中,单击时”下点击“添加动作”,选择“框架中打开链接”,选择目标为“内联框架”,选择链接到“导航菜单”页面。

2.6K20

提高IIS网站服务器性能2点考虑(缓存+gzip)

首先网站目录要划分合理,图片、CSS、JavaScript均放在单独目录下,然后IIS中选择目录,点属性-HTTP头,启用内容过期,可以选择30天后过去,这样,用户浏览器将比较当前日期和截止日期,以便决定是显示缓存页还是从服务器请求更新页...2)、使用外部JavaScript和CSS,将所有的JavaScript和CSS都做成外部文件形式进行引用,这主要是为了让这些文件可以被浏览器缓存起来。...二、启用Gzip压缩,增加访问速度   HTTP压缩是Web服务器和浏览器间传输压缩文本内容方法。HTTP压缩采用通用压缩算法如Gzip等压缩HTML、JavaScript或 CSS文件。...但是通常metabase.xml文件是无法修改,因为iis正在使用该文件,所以就需要停止iis。操作方法:从“开始”菜单单击“运行”。 “打开”框中,键入 cmd,然后单击“确定”。...用文本编辑器如记事本打开 MetaBase.xml 文件,编辑完成后可以直接保存,或者用已经编辑好文件覆盖。

86520

如何在Mac上轻松更改Finder外观

接下来是Finder用于突出显示所选文件或文件夹颜色。单击“突出显示颜色”旁边下拉菜单,然后从列表中选择一种新颜色。...隐藏侧边侧边栏通常包含Mac驱动器,连接服务器以及Mac上一些主文件夹。如果您不需要访问这些项目,则可以隐藏侧边栏,使其不会出现在Finder窗口中。...选择顶部“显示”菜单,然后单击“隐藏工具栏”。如果您只想从工具栏中删除某些项目,请单击“查看”菜单“自定义工具栏”选项。...单击显示菜单,然后选择隐藏状态栏。你们都准备好了 Finder中更改文件夹图标 Finder对所有文件夹使用相同图标,但是您可以为所选文件夹更改此图标。...单击边栏选项卡。 侧边栏中勾选您想要查看项目。 取消勾选要从边栏中删除项目。 更改是即时,您无需单击任何按钮即可保存设置。

5.8K00

React Native调试心得

也可以通过模拟器上菜单键来打开。 心得:高版本模拟器通常没有菜单,不过Nexus S上是有菜单,如果想使用菜单键,可以创建一个Nexus S模拟器。...断点其实很简单 断点(Breakpoint) 是脚本中设置好暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...添加和移除断点 Sources 面板文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置断点处会有一个蓝色标签,单击蓝色标签...心得:右键点击蓝色标签会打开一个菜单菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点...心得:你可以通过断点前复选框来启用和禁用断点,也可以单击右键来进行更多操作(如:移除断点,移除所有断点,启用禁用断点等)。

5K70

前端-10款web动画插件

今天我们给大家带来另外一款基于HTML5 Canvas飞机航班线路模拟动画,它模拟了许多航班不同目的地起飞降落数量。 ?...今天给大家分享另外一款基于CSS3开关样式自定义单选框插件,一共四种样式,都比较有创意。 ?...5.jQuery左侧边栏多级菜单 适合后台管理页面使用 这是一款基于jQuery侧边栏多级下拉菜单插件,这个菜单特点是可以固定在左侧边栏,当页面滚动时整个菜单可以保持一直可见,方便操作。...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站后台管理页面中使用。 ?...8.CSS3模拟谷歌Loading加载动画 我们已经为大家分享过很多基于CSS3Loading加载动画了,大部分都是一些简单几何图形组合而成循环播放动画,例如这个CSS3方块翻转效果Loading

5.9K50

WordPress 初学者词汇表(术语解释)

Theme(主题) Plugin(插件) Header Menu(菜单) Widget(小部件) Siderbar(侧边栏) Footer(页脚) Akismet Jetpack SEO(搜索引擎优化)...jQuery是一个 JavaScript 库 – 旨在让开发人员更轻松地操作网页元素软件。... WordPress 中,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单侧边菜单、页脚菜单等)。... WordPress 中,小部件用于向Widget Areas(小部件区域)添加内容和功能,例如侧边栏、页脚或启用小部件任何其他位置。...根据您 WordPress 主题(或页面构建器),侧边栏通常是左侧或右侧垂直列,尽管根据帖子类型或页面,某些设计可能具有两个侧边栏甚至自定义侧边栏。

7.1K20

React Native调试技巧与心得

也可以通过模拟器上菜单键来打开。 心得:高版本模拟器通常没有菜单,不过Nexus S上是有菜单,如果想使用菜单键,可以创建一个Nexus S模拟器。...断点其实很简单 断点(Breakpoint) 是脚本中设置好暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...添加和移除断点 Sources 面板文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置断点处会有一个蓝色标签,单击蓝色标签...心得:右键点击蓝色标签会打开一个菜单菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点...心得:你可以通过断点前复选框来启用和禁用断点,也可以单击右键来进行更多操作(如:移除断点,移除所有断点,启用禁用断点等)。

6.7K50

sublime 3及常用插件

5、SublimeCodeIntel SublimeCodeIntel 作为一个代码提示和补全插件,支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML...6、FileDiffs 功能:强大比较代码不同工具 简介:比较当前文件与选中代码、剪切板中代码、另一文件、未保存文件之间差别。可配置为显示差别在外部比较工具,精确到行。...Open a GBK File Save file with GBK encoding Change file encoding from utf8 to GBK or GBK to utf8 8、加强侧边栏...则只打开了该文件如图;若Open In Browser → 右侧任意一栏(点击),则在浏览器中预览 设置默认预览浏览器,文件(右键单击) → Open In Browser → Default(点击)时...,会以默认浏览器打开,如果我们想自己设置默认浏览器,我们应该进行如下配置: ①.菜单Sublime Text → Preferences → Package Settings → Side Bar →

4.9K30

使用iPad将iPad用作Mac第二台显示器

单击 ? image Mac上菜单栏中AirPlay图标 ,然后选择选项以连接到iPad。或使用 Sidecar偏好设置 进行连接。...这是与他人共享Mac屏幕好方法。 要结束Sidecar会话,请返回AirPlay菜单,然后选择断开连接选项。或单击iPad 边栏中断开连接按钮。 了解有关使用外接显示器更多信息。...将指针悬停在绿色按钮上时出现菜单 ---- 使用边栏 侧边栏将常用控件放在iPad屏幕侧面。...image ---- 使用Sidecar偏好设置 选择Apple菜单>“系统偏好设置”,然后单击“ Sidecar”。这些首选项仅在支持Sidecar计算机上可用。 ?...边车偏好 显示侧边栏:iPad屏幕左侧或右侧显示侧边栏,或将其关闭。 显示触摸栏: iPad屏幕底部或顶部显示 触摸栏,或将其关闭。

13.4K00

伸缩侧边

效果图: 展开 收起 实现原理: 展开:单击图标或空白展开主菜单栏,单击图标额外展开子菜单栏 收起:单击空白收起主菜单栏和所有子菜单栏 通过js改变元素类,并在样式表中定义不同类样式,实现样式改变...主菜单类为.long时,width:25rem,类为.short时,width:7.5rem 子菜单类为.hide时,height:0,类为.show时,heigth由js根据子元素数量计算 源代码.../伸缩侧边栏.js"> <link rel="stylesheet" href="....*/ /*<em>菜单</em>展开*/ function in_list(self){ /*获取图标对应<em>的</em>子<em>菜单</em>*/ let in_ul = self.nextSibling.nextSibling;...('list'); /*子<em>菜单</em>收起时,<em>单击</em>展开主<em>菜单</em>和该子<em>菜单</em>*/ if (in_ul.className === "hide in_ul"){ in_ul.className

23710

前端面试题整理

日常场合,这两个词是可以互换。es是js各个版本。 javascript与ECMAScript、DOM、BOM关系 闭包主要解决什么问题?...答:凡是闭包域内声明变量或方法,外部无法直接访问,闭包域可以访问外部变量或方法.隔离了作用域。...storage 和cookie区别 答:① cookie是客户端用来存储数据,它既可以客户端设置也可以服务器端设置。...中使用表达式 8.将css, js都放在外部文件中 9.减少DNS查询 10.最小化css, js,减小文件体积 11.避免重定向 12.移除重复脚本 13.配置实体标签ETag 14.使用...include@extendmixin 答:Sass:@mixin和@extend该如何选择 如何实现0.5px 答:webapp中CSS3实现 0.5px细线 CSS实现border

1.7K21

Visual Studio 2008 每日提示(十三)

#121、如何设置vs启动时(工作区)加载内容 原文链接:How to customize what Visual Studio opens to 操作步骤: 菜单:工具+选项+环境+启动,“启动时...Menu 操作步骤: 菜单:按“Ctrl+Alt+Down”显示“文件下拉菜单”,可以通过上下方向键来选择文件打开文件 文件下拉菜单支持输入首字符匹配滚动,即输入文件名会自动在下拉列表中匹配选中。...#124、文件标签栏上关闭除激活文件外所有文件 原文链接:You can "Close all but this" on files in the File Tab Channel 操作步骤: 鼠标右键单击一个文件标签...#127、如果关闭选择文件 原文链接:How to close just the selected files you want 操作步骤: 菜单:窗口+”窗口…“,”窗口“窗口中,你可以对所选择文件实现下面三个功能...停靠#7:把工具窗体停靠在右外侧边。 停靠#3:把工具窗体停靠在右内侧边。 评论: 这9个位置,只要是工具窗口都可以停靠,包括”搜索和替换“窗口。

2K80

Edge2AI之使用 Cloudera Data Viz 创建仪表板

侧边栏上,单击Site Administration。 您将看到一系列选项卡,其中包含您可以作为站点管理员执行所有任务。 单击Runtime/Engine选项卡。...添加Data Visualization到CDSW项目中 侧边栏上,单击Projects。 单击要在其中添加客户引擎项目。因为不需要已有的脚本,可以选择空白项目。...从左侧边栏中 打开项目设置,然后单击引擎选项卡。Project Settings→Runtime/Engine,选择Legacy Engine 从下拉菜单中选择数据可视化图像。...单击保存引擎设置。 CDSW中创建Data Visualization Application 转到项目的概述页面。 侧边栏上,单击应用程序。 单击新建应用程序。...为此,请单击EDIT FIELDS按钮。 Measures列表中,找到sensor_ts字段,打开其下拉菜单单击Clone。Copy of sensor_ts将出现一个新Measures。

3.2K20

React Native开发之调试

重载 JavaScript 只是修改了js代码情况下,如果要预览修改结果,你不需要重新编译你应用。在这种情况下,你只需要告诉React Native重新加载js即可。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...如果你需要移除断点,单击蓝色标签,断点即被移除。 ?...右键点击蓝色标签会打开一个菜单菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(...你可以通过断点前复选框来启用和禁用断点,也可以单击右键来进行更多操作(如:移除断点,移除所有断点,启用禁用断点等)。 ?

3.8K80

PubMed使用者指南(一)

关于作者检索更多信息: 1.要使用检索生成器按作者检索,单击Advanced search,然后从所有字段菜单中选择作者。作者检索框包括一个自动完成功能。...(如1059-1524) 关于杂志检索更多信息: 1.要使用检索生成器进行期刊检索,单击高级检索,然后从所有字段菜单中选择期刊journal。...使用过滤器步骤: 1.PubMed上进行一次检索 2.单击你想要从侧边栏激活过滤器。激活过滤器旁边会出现一个复选标记。...3.从菜单左侧选项列表中选择一个类别:文章类型、物种等。 4.每个类别中,选择你想要添加到侧边栏中过滤器。 5.单击Apply。这将关闭弹出菜单,并在侧边栏上与其他过滤器一起显示你选择。...6.如果想要取消你选择,请单击cancel或单击右上角X以关闭弹出窗口并返回你检索结果。 7.要将过滤器应用到检索中,请单击侧边栏上筛选器。

8.3K10

React Native程序调试

重载 JavaScript 只是修改了js代码情况下,如果要预览修改结果,你不需要重新编译你应用。在这种情况下,你只需要告诉React Native重新加载js即可。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...如果你需要移除断点,单击蓝色标签,断点即被移除。 ?...右键点击蓝色标签会打开一个菜单菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(...你可以通过断点前复选框来启用和禁用断点,也可以单击右键来进行更多操作(如:移除断点,移除所有断点,启用禁用断点等)。 ?

3.6K60

如何在 Chrome 中执行 JavaScript 代码

右键“检查” Chrome 中打开一个页面之后,我们可以页面中单击鼠标右键,然后菜单中中选择“检查”,这样就可以打开开发者工具了。...快捷键 F12 同样,一般 Chrome 中,可以直接通过 F12 快捷键来打开开发者工具。 菜单进入 依次从右上角菜单栏中选择 更多工具 -> 开发者工具 开启。...开发者工具中切换到 Sources 菜单,然后选择其中 Snippets 选项卡,接着点击下方 + New snippet 来新建一个脚本文件。...window.alert("公众号:村雨遥"); console.log("公众号:村雨遥"); 创建 Snippet 脚本上单击鼠标右键,我们可以进行如下操作: Run:运行,执行我们创建脚本...Rename:重命名,对我们创建脚本进行重命名。 Remove:删除,移除我们创建脚本。 Save as:另存为,将我们创建脚本导出。

4.4K20

使用IBM Blockchain Platform extension开发你第一个fabric智能合约

如果你已经有了VS Code,点击屏幕左侧边栏中扩展程序。顶部,扩展市场中搜索IBM Blockchain Platform。单击安装,然后单击重新加载。那么就安装好了。...注意事项: Fabric是docker环境中运行,智能合约现在可以用JavaScript, TypeScript, Java, Go 这四种语言来编写。...侧边栏中,单击IBM Blockchain Platform图标(它看起来像一个正方形,如果这是你安装最新扩展,则可能位于图标集底部)。...将鼠标悬停在SMART CONTRACT PACKAGES面板上,单击“…”菜单,然后从下拉列表中选择“创建智能合约项目”。 选择一种智能合约语言。...侧边栏中,单击IBM Blockchain Platform图标。 将鼠标悬停在SMART CONTRACT PACKAGES面板上,单击“…”菜单,然后从下拉列表中选择“打包智能合约项目”。

1.3K20
领券