首页
学习
活动
专区
工具
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 文件,编辑完成后可以直接保存,或者用已经编辑好文件覆盖。

    90720

    Java爬虫中数据清洗:去除无效信息技巧

    互联网信息爆炸时代,数据获取变得异常容易,但随之而来是数据质量问题。对于Java爬虫开发者来说,如何从海量网页数据中清洗出有价值信息,是一个既基础又关键步骤。...爬虫领域,数据清洗目的是去除网页中广告、导航链接、脚本、样式表等无效信息,保留对用户或后续处理有用数据。常见无效信息类型广告内容:多数以浮窗、横幅等形式出现,通常含有特定广告标识。...导航链接:网页顶部或侧边导航菜单,对爬取内容无实际意义。脚本和样式:JavaScript代码和CSS样式,对文本内容提取没有帮助。重复内容:同一页面上重复出现信息块。...javaDocument doc = Jsoup.parse(content);String text = doc.text(); // 提取文本3....CSS选择器CSS选择器可以精确地定位页面元素,便于移除或提取特定部分。

    14910

    Java爬虫中数据清洗:去除无效信息技巧

    互联网信息爆炸时代,数据获取变得异常容易,但随之而来是数据质量问题。对于Java爬虫开发者来说,如何从海量网页数据中清洗出有价值信息,是一个既基础又关键步骤。...爬虫领域,数据清洗目的是去除网页中广告、导航链接、脚本、样式表等无效信息,保留对用户或后续处理有用数据。 常见无效信息类型 广告内容:多数以浮窗、横幅等形式出现,通常含有特定广告标识。...导航链接:网页顶部或侧边导航菜单,对爬取内容无实际意义。 脚本和样式:JavaScript代码和CSS样式,对文本内容提取没有帮助。 重复内容:同一页面上重复出现信息块。...java Document doc = Jsoup.parse(content); String text = doc.text(); // 提取文本 3....CSS选择器 CSS选择器可以精确地定位页面元素,便于移除或提取特定部分。

    10910

    用Axure画出Web后台产品菜单栏组件

    默认展开左侧菜单二级页面处于某一页面的时候,对应菜单项都会处于选中状态并呈现不同样式。点击一级分类即可收起对应二级页面,再次点击即可展开。默认进入首页,同时首页对应菜单处于选中状态。...10、左侧母版区域,右键母版“菜单栏”,点击“添加到页面中…”然后点击“全选”,勾选“置于底层”,最后点击确定。11、生成原型HTML并查看原型效果。02 画出有交互原型12、先画进入首页交互。...双击母版“菜单栏”进入,选择首页,右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“单击时”,添加动作“打开链接”,链接到“首页”,点击“确定”按钮。...右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“单击时”,添加动作“打开链接”,链接到“对应页面”,点击“确定”按钮。14、再画一级分类交互。...然后点击组合“一级分类”,右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“单击时”,添加动作“显示/隐藏”,目标选择组合“二级页面”,操作选择“切换”,点击更多选项然后设置“展开收起”,点击

    18520

    Visual Studio 智能代码插件:CodeGeeX

    插件安装方式 1.Visual Studio 2022扩展->管理扩展中搜索CodeGeeX。 2、Visual Studio窗口顶部"扩展"菜单中,点击下拉菜单中选择"管理扩展"。...3、搜索CodeGeeX,然后单击"下载"或"安装"按钮,具体如下图所示: 4、重新启动Visual Studio,就完成了安装,可以Visual Studio 扩展看到CodeGeeX目录,具体如下图所示...1、登录 启动后进行登录,有三种登录方式,可以点击左上角 登录 链接,也可以点CodeGeeX菜单"登录”,也可以打开聊天框打开侧边栏进行登录,具体如下图所示: 这里通过CodeGeeX侧边栏登录...3、侧边侧边栏可以通过拖拽方式变宽,或是同其他visual窗口一样进行停靠、锚定,或放在更习惯左侧或右侧位置,确保Visual Studio 上编程丝滑体验。...右键菜单中点击CodeGeeX ,然后点击下一级菜单生成注释即可。 生成单元测试 在编辑器中选中代码,点击鼠标右键,菜单中点击CodeGeeX,然后点击下一级菜单生成单测。

    22010

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

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

    6K00

    React Native调试心得

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

    5.1K70

    前端-10款web动画插件

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

    5.9K50

    React Native调试技巧与心得

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

    6.8K50

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

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

    7.2K20

    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.5K00

    伸缩侧边

    效果图: 展开 收起 实现原理: 展开:单击图标或空白展开主菜单栏,单击图标额外展开子菜单栏 收起:单击空白收起主菜单栏和所有子菜单栏 通过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

    30510

    前端面试题整理

    日常场合,这两个词是可以互换。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

    PubMed使用者指南(一)

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

    8.6K10
    领券