首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

最简单js实现点击展开二级菜单功能

虽然,jQuery已经非常好用了,但是实际开发项目中,还是有很多限制,比如项目组奇葩要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大。...我最近就遇到做个点击展开二级菜单要求,当然只能用原生JS去写来实现,我借鉴了网上一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏,需要点击才能展现二级菜单,再点击就是隐藏二级菜单...这里有两个点,实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断,if else判断当前是block还是none。 <!...如果,你页面默认进来二级菜单是展现点击时才关闭。直接把style标签样式display=”none”去掉就可以。同时需要修改一下js。...sub_menu.style.display = "none"; } 仔细看,不然你就会发现你需要点击两次才会出现想要效果

4K20

EasyCVR视频调阅分组页面点击文字不能展开列表问题优化

有用户反馈在使用EasyCVR平台视频调阅分组管理时,点击文字不能展开分组列表,如下图示位置所示,只能点击左边三角号才能展开,但三角号较小点击成功率并不是很高。...我们对比视频广场页面的显示,在视频广场也有三角号和文字展示,但是可支持同步点击,使用起来更方便一些。...这里我们通过测试发现用户反馈现象是存在,但并不是平台bug,是平台在开发过程中没有对此处位置做处理,因此只能通过点击三角号来打开列表。...通过用户现场反馈我们分析了现象,考虑用户体验后决定在当前基础上对文字点击做一个适配工作,更贴近用户在实际使用过程中需求和体验。目前功能已经开发完成,如需使用或测试可联系工作人员获取新版本。...EasyCVR是一款功能全面、开发灵活,且十分注重用户体验视频平台,对于功能类及使用层面上专注更多,我们会不断优化平台操作体验及升级平台功能来满足用户使用习惯和项目需求。

34510

15 个常见 Node.js 面试问题答案

为帮助 Node.js 开发人员更好面试,我列出了 15 个常见 Node.js 和网络开发相关面试问题。 在本文中,我们将重点讨论 Node.js 相关问题。...但是,请记住 JavaScript 问题在 Node.js 面试中也经常问到,所以准备一些对你来说没什么坏处。不久前我们写了一篇关于常见 JavaScript 面试问题帖子,涵盖了所有这些基础。...Node.js 带有一个内置 REPL 来运行 JavaScript 代码,类似于我们在浏览器中用来运行 JavaScript 代码控制台。...要启动 Node.js REPL,只需在命令行上运行 node,然后写一行 JavaScript 代码,就可以在下一行看到它输出。...结论 在本文中,讨论了 15 个最常见 Node.js 面试问题,帮助你为下一次面试做准备。知道你可能被问到问题答案,面试就不再紧张了。 祝你好运,面试成功!

1.7K20

【Node.js】1430- 15 个常见 Node.js 面试问题答案

为帮助 Node.js 开发人员更好面试,我列出了 15 个常见 Node.js 和网络开发相关面试问题。 在本文中,我们将重点讨论 Node.js 相关问题。...但是,请记住 JavaScript 问题在 Node.js 面试中也经常问到,所以准备一些对你来说没什么坏处。不久前我们写了一篇关于常见 JavaScript 面试问题帖子,涵盖了所有这些基础。...Node.js 带有一个内置 REPL 来运行 JavaScript 代码,类似于我们在浏览器中用来运行 JavaScript 代码控制台。...要启动 Node.js REPL,只需在命令行上运行 node,然后写一行 JavaScript 代码,就可以在下一行看到它输出。...结论 在本文中,讨论了 15 个最常见 Node.js 面试问题,帮助你为下一次面试做准备。知道你可能被问到问题答案,面试就不再紧张了。 祝你好运,面试成功!

1.7K20

利用HTML5,无JS实现各种交互效果

只显示了``标签内容,而``默认隐藏了; 2. ``标签前面出现了一个小三角; 小三角图形隐喻是:我是可点击点击我可能会出现宝箱。...原本隐藏``标签显示出来了; 2. ``标签前面的小三角方向朝下了; 此时我们再一次点击,``标签内容又会隐藏收起,箭头方向还原,如下图: !... ### 三、Chrome浏览器下点击时候outline轮廓等体验处理 UI可以定制了,但是还有个不容忽视体验问题,那就是在Chrome浏览器下点击时候会出现...### 四、基于details元素行为各种交互效果案例 了解了``元素点击交互行为;解决了UI定制难题;解决了`outline`体验问题,下面我们就可以付诸实践,不借助任何JS...('details');``` 最后,无JS实现好处有: 省了代码,加载快了; 实现更简单了,开发快了; JS还没加载交互也能进行,体验好了; 键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了

7.5K20

iframe高度自适应_div自适应高度

我翻了前面的几十条,刨去大量转载,有那么三五篇是原创。而这几篇原创里面,基本上只谈到如何自适应静东西,就是没有考虑到JS操作DOM之后,如何做动态同步问题。...两个方法都只处理了静东西,就是只在内容加载时候执行,如果JS去操作DOM引起高度变化,都不太方便。...如果在主窗口做一个Interval,不停来获取被包含页高度,然后做同步,是不是即方便,又解决了JS操作DOM问题了呢?答案是肯定。..., 红色 = 错误值, 绿色 = 正确值) / 层隐藏时 层展开时 bHeight dHeight bHeight dHeight IE6 184 184 184 303 IE7 184...如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到高度值还是维持在展开高度303,而非隐藏回去真正值184,就是说长高了之后缩不回去了。

6.6K40

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

而且首页这个菜单可以点击,执行跳转,其它两个菜单又有子菜单,点击只是一个子菜单显示与隐藏操作。 所以,侧边栏数据肯定是一个数组,并且是一个对象数组。...--点击事件为触发子元素显示或隐藏 比如点击‘销售消息通知’,就触发‘销售消息通知’下面子菜单显示或者隐藏。...3.给侧边栏写相关一些操作 关于侧边栏操作,比较简单,无非就是点击菜单,跳转路由,标志当前项以及菜单下面子菜单显示与隐藏。...然后跳转路由那个没有什么可以说了,就把url当成参数传进去而已。 2.最后,实现菜单下面子菜单显示与隐藏。这个方法就一行代码。...,点击其它菜单,右边都是白色一片。

1.5K10

如何不用一行 JS 代码做一个现代化可交互网站

之前做了一个纯 HTML+CSS 网站,完全没有 JS 代码,大家可以点击这个链接体验一下 https://woopen.github.io/ssp/ 。...导航栏默认是收起点击可以展开,效果如下图所示。...可以看到点击这个导航栏按钮,按钮上 3 条杠会变成一个关闭图形,并且有一个很酷导航展开动画,从导航按钮开始展开一个圆,然后出现导航菜单,鼠标放到导航菜单项上面还有很炫 Hover 效果,最后再次点击导航按钮...点击交互 首先来看一下大家最关心,类似于 JS onclick 导航点击效果是如何实现,在 CSS 中 checkbox 元素是有 CSS 状态,就和 :hover 类似,如果一个 checkbox...背景 导航背景就是点击按钮展开那个圆形背景,它样式代码如下。

1.6K10

从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载

⚡优化路由懒加载 内容(点击展开/收起) SPA中一个很重要提速手段就是路由懒加载,当打开页面时才去加载对应文件,我们利用Vue异步组件和webpack代码分割(import())就可以轻松实现懒加载了...内容(点击展开/收起) 标签rel属性两个可选值。..., 类似字体文件这种隐藏在脚本、样式中首屏关键资源,建议使用preload 移动端流量访问时慎用 ⚡托管至OSS + CDN加速 内容(点击展开/收起) 当应对一些弱网地区时,OSS + CDN无疑是很强力提速手段...但如果有条件还是建议上,提升很大 感知性能优化 白屏时loading动画 内容(点击展开/收起) 首屏优化,在JS没解析执行前,让用户能看到Loading动画,减轻等待焦虑。...这才是你说服上司或领导投入成本到性能优化上重要依据 个人提升 性能优化算是老生常谈的话题了,但部分人在面对怎么做性能优化问题时,仅仅只是罗列出各种常见优化手段,更有深度答案应该是遇到什么性能问题

2.3K10
领券