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

需要使用Vanilla Javascript隐藏/显示子菜单

隐藏/显示子菜单可以使用Vanilla JavaScript来实现。Vanilla JavaScript是指纯粹的JavaScript,不依赖于任何框架或库。

要隐藏/显示子菜单,可以通过以下步骤实现:

  1. 首先,为父菜单添加一个事件监听器,以便在点击时触发相应的操作。
代码语言:txt
复制
const parentMenu = document.querySelector('.parent-menu');
parentMenu.addEventListener('click', toggleSubMenu);
  1. 在事件处理函数toggleSubMenu中,切换子菜单的显示状态。可以通过添加/移除CSS类来实现。
代码语言:txt
复制
function toggleSubMenu() {
  const subMenu = document.querySelector('.sub-menu');
  subMenu.classList.toggle('show');
}
  1. 在CSS中定义.show类,用于显示子菜单。
代码语言:txt
复制
.sub-menu {
  display: none;
}

.show {
  display: block;
}

这样,当点击父菜单时,子菜单的显示状态将会切换。

关于Vanilla JavaScript隐藏/显示子菜单的示例代码和效果,您可以参考以下链接:

Vanilla JavaScript隐藏/显示子菜单示例

请注意,以上示例代码仅为演示目的,实际应用中可能需要根据具体情况进行适当的修改和调整。

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

相关·内容

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构 首先,需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的和元素。...每个菜单项都包含一个链接,以及一个嵌套的无序列表来表示二级菜单。CSS 样式 接下来,需要使用CSS样式来控制二级菜单的显示和隐藏。可以通过设置样式的display属性来实现。...*/}上述示例中,我们使用CSS选择器将二级菜单设置为默认隐藏。...JavaScript 交互 要使用jQuery实现二级菜单的显示和隐藏,可以使用jQuery的事件处理函数。...当鼠标进入菜单项时,使用slideDown()方法显示相应的二级菜单。当鼠标离开菜单项时,使用slideUp()方法隐藏二级菜单。

3.3K30

能用CSS实现的就不用麻烦JavaScript

Flash 被抛弃,有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。...鼠标悬浮的场景十分常见,例如导航的菜单: [image.png] 一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素,才方便用css控制,例如上面的菜单,是把menu当作导航的一个相邻元素...同时menu自已本身hover的时候也要显示,否则鼠标一离开导航的时候,菜单就消失了: .menu:hover{ display: list-item; } 这里会有一个小问题,即menu和导航需要挨着一起...的hover发挥了作用,所以判断为显示,然后又把它隐藏了。...第二种场景,使用子元素,这个更简单。

1.4K11
  • webpack+vue项目实战(二,开发管理系统主页面)

    而且首页这个菜单可以点击,执行跳转,其它两个菜单又有子菜单,点击只是一个子菜单显示与隐藏的操作。 所以,侧边栏的数据肯定是一个数组,并且是一个对象数组。...[] } ] 对于子菜单,由于没有子菜单了,所以需要三个属性(要显示的文字,跳转的url,是否当前标识:'一个标志string(0)')就好。...--如果有二级菜单--> 子元素的显示或隐藏 比如点击‘销售消息通知’,就触发‘销售消息通知’下面子菜单的显示或者隐藏。...如果显示就隐藏,隐藏就显示--> javascript:;" class="tit" @click.stop="flod(index)">...运行一下,发现路由变了,当前项有标识了,子菜单的显示与隐藏也有了!原理也很简单。 ?

    1.5K11

    使用 Go + HTML + CSS + JS 构建漂亮的跨平台桌面应用

    内置 Svelte、React 、Preact 、Vue、Lit 和 Vanilla JS 的模板 3. 从 Javascript 轻松调用 Go 方法 4....Windows 上不需要 CGO 或外部 DLL 6. 使用 Vite 的实时开发模式 7. 可以轻松创建、构建和打包应用的强大命令行工具 8. 丰富的 运行时库 9....它不仅看起来很强,它使用原生菜单和半透明 - 你希望从现代原生应用中得到的一切 Wails 带有许多预配置的模板,可让您快速启动和运行应用程序。...有以下框架的模板:Svelte、React、Vue、Preact、Lit 和 Vanilla。每个模板都有 Javascript 和 Typescript 版本。...Wails 使用专门构建的库来处理窗口、菜单、对话框等原生元素,因此您可以构建美观、功能丰富的桌面应用程序。 它不嵌入浏览器,因此性能高。相反,它使用平台的原生渲染引擎。

    6.9K10

    Vue成神之路之实例和插槽

    非插槽模板指的是html模板,比如'div、span、ul、table'这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html...但是插槽显示的位置却由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置。...也就是说,子组件的匿名插槽被使用了,是被下面这块模板使用了。...而作用域插槽绑定了一套数据,父组件可以拿来用,所以父组件只需要提供样式,内容可以显示子组件插槽绑定的数据。...--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽--> 我就是模板 子组件: <template

    2.4K20

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow...隐藏对象 ) 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 ) 1、盒子模型位置摆放三大机制 - 普通流 /...- 子元素绝对定位 父元素相对定位 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖...需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变...只能对超出部分隐藏代码 ; overflow 可设置的值 : visible : 子元素超出父容器的部分仍然显示 ; hidden : 子元素超出父容器的部分隐藏 ; scroll : 不管子元素是否超出父容器

    35910

    WEB入门之十八 动画特效

    但是直接使用JavaScript进行动画特效开发比较困难,特别是一些较复杂的动画特效,动辄就需要写百十行的代码,效率低、浏览器兼容性的问题也难以处理。...“前台设计组”请使用滑动动画;“前端开发组”请使用淡入淡出动画;“后台开发组” 请使用显示/隐藏动画。...3:滑动的横向菜单 训练技能点 Ø jQuery内置动画函数 需求说明 模拟实现一个如图8.2.3所示的横向菜单,当鼠标悬浮到横向菜单上时,其子菜单 淡入显示;当鼠标离开横向菜单时,其子菜单淡出隐藏。...实现步骤 (1) 实现图8.2.3所示的界面,二级子菜单默认隐藏。 (2) 给一级菜单设置hover事件,并在该事件中实现二级子菜单的淡入淡出,参考代码如下所示。...(侧边菜单是一个图片) 实现步骤 (1)实现图8.2.4所示的界面,侧边菜单默认隐藏 (2)使用animate函数实现侧边菜单的滑动隐藏/显示,参考代码如下所示。

    15410

    WEB入门之十八 动画特效

    但是直接使用JavaScript进行动画特效开发比较困难,特别是一些较复杂的动画特效,动辄就需要写百十行的代码,效率低、浏览器兼容性的问题也难以处理。...“前台设计组”请使用滑动动画;“前端开发组”请使用淡入淡出动画;“后台开发组” 请使用显示/隐藏动画。...3:滑动的横向菜单 ​训练技能点​ Ø jQuery内置动画函数 ​需求说明​ 模拟实现一个如图8.2.3所示的横向菜单,当鼠标悬浮到横向菜单上时,其子菜单 淡入显示;当鼠标离开横向菜单时,其子菜单淡出隐藏...实现步骤​ (1) 实现图8.2.3所示的界面,二级子菜单默认隐藏。 (2) 给一级菜单设置hover事件,并在该事件中实现二级子菜单的淡入淡出,参考代码如下所示。...(侧边菜单是一个图片) ​实现步骤​ (1)实现图8.2.4所示的界面,侧边菜单默认隐藏 (2)使用animate函数实现侧边菜单的滑动隐藏/显示,参考代码如下所示。

    7610

    Go每日一库之208:wails(使用 Go 和 Web 技术构建桌面应用程序)

    声明原生对话框和菜单支持现代半透明和“磨砂窗”效果Go 和 Javascript 之间统一的事件系统强大的命令行工具,可快速生成和构建您的项目跨平台使用原生渲染引擎 - 没有嵌入浏览器!...功能​原生菜单、对话框、主题和半透明Windows、macOS 和 linux 支持内置 Svelte、React 、Preact 、Vue、Lit 和 Vanilla JS 的模板从 JavaScript...有以下框架的模板:Svelte、React、Vue、Preact、Lit 和 Vanilla。 每个模板都有 JavaScript 和 TypeScript 版本。...原生元素​Wails 使用专门构建的库来处理窗口、菜单、对话框等原生元素,因此您可以构建美观、功能丰富的桌面应用程序。...运行时库​Wails 为 Go 和 JavaScript 提供了一个运行时库,它可以处理现代应用程序需要的很多东西,比如事件、日志记录、对话框等。

    15410

    为什么 Netflix 部分功能放弃React,选择“原生”JavaScript?

    而React虽然在构建交互式UI方面很出色,但也有个“隐藏的代价”:它对JavaScript资源的依赖不小,可能导致加载时间拖延。...等页面加载完成后,Vanilla JavaScript则接管了交互逻辑。...使用现代工具:比如Webpack、Vite等打包工具,可以帮助你实现更细粒度的代码分割和加载优化。...而Netflix的策略是:在需要的地方用React,在轻量化场景用Vanilla JavaScript。 这样的搭配不仅让性能飞跃,还让技术栈更加灵活。...特别是在不需要复杂交互的场景下,Vanilla JavaScript是极简而高效的选择。 优化用户体验是最终目标:无论用什么技术,核心目的都是让用户感受到“快”和“流畅”。

    10710

    前端中那些让你头疼的英文单词

    幸亏我们不是英语专业的学生,我们只需要记忆的便是常用的一些计算机英语即可,这些单词敲过无数遍,难道看起来,它还是陌生人吗?...),submit提交,button普通的按钮,reset重置(工作中一般不用)) select 选择菜单(下拉菜单功能嵌套option使用) table 表格 (tr行 td单元格 th表头) 普通语义...相对的 上面的内容如果大家哪个忘记了具体的用法,可以点击后面连接查看详细内容:JavaScript高级 ---- show 显示 hide 隐藏 toggle 触发 (在jQuery中,但凡是有两个功能的效果是相反的...addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp 隐藏(向上滑,就是把东西收起来,就隐藏了) slideDown...显示 (向下滑,向下展开,就显示了) slideToggle 一会显示一会隐藏 stop 停止(清除动画机制,在形成动画函数之前加stop) fadeIn 淡入 fadeOut 淡出 fadeToggle

    2.3K20

    前端开发者常见的英文单词汇总

    来源 | https://www.fly63.com 在前端开发过程中,掌握一些常见英语词汇是必要的,今天跟大家分享一些前端常见的英语词汇,供大家参考使用。...导航类 导航:nav 标题:title 摘要:summary 菜单:menu 子菜单:submenu 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:...:children 隐藏:hidden 显示:visible 溢出:overflow 列表:list 样式 style 导航:nav 显示类型:display 广告图片:banner 页眉:header...静态资源:public/static 路由:router 页面/视图: pages/views 配置: config 其他 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript...List) 自定义列表 form 表单 action 地址 method 方法 input 输入框 text 文本 password 密码 radio 单选 checkbox 多选 select 下拉菜单

    2.7K21
    领券