资讯专栏INFORMATION COLUMN

折叠多级菜单的实现方法

wangbjun / 1008人阅读

摘要:对于在网页上展示的课本目录这样的多级菜单,想要实现完整显示某一章的目录,其它章只显示章名的效果,最开始用的是作为关键字搜索,但是找到的语句并没有效果。注各章标签的类名为,需完整显示的那一章的类名为。

对于在网页上展示的课本目录这样的多级菜单,想要实现“完整显示某一章的目录,其它章只显示章名”的效果,最开始用的是 "hide all child elements but first" 作为关键字搜索,但是找到的语句 $(".unfocused").not(":first-child").hide(); 并没有效果。第二天早上再看这段代码的时候,决定逐语句测试,发现最开始的 $(".unfocused") 语句得到的是一个 Object 数组,这样直接隐藏第一个子节点之后的子节点的话,会把其余各章的章标题都隐藏掉。(注:各章 div 标签的类名为 unfocused,需完整显示的那一章的类名为 focused。)

后来想到可以用 each() 方法来隐藏每一章的非首个子节点,但是该方法后面需要跟匿名函数,这时在 StackOverflow 上看到了一个通过 CSS 后代选择器来选择子节点的方法,忽然想到自己可以用父节点的类名加上子元素选择器来隐藏各章的非首个子节点,$(".unfocused > div:not(:first-child)").hide(),一行语句就搞定了,so good!

不过最后在网页源码中测试的时候,发现语句又没有生效,检查了一下代码,原来是语句没有写完整,下面的语句中,最后一行的圆括号和分号都给漏掉了,真是粗心……

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79578.html

相关文章

  • 原生js练习题---第六课

    摘要:自定义多级右键菜单实现效果自定义多级右键菜单第五课第六题中已经通过事件实现了一级右键菜单,所以这题只要在上面再添加事件唤出子菜单即可。 0x1完美拖拽 实现效果:6-01完美拖动 这里没有使用h5的拖动,毕竟原题也是考察借助鼠标事件实现自定义的拖动,所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api,当然由于做这个系列题目使用的都是es5的语法,所以IE8往下就兼容不...

    tinyq 评论0 收藏0
  • js递归,无限分级树形折叠菜单

    摘要:效果图表结构形式数据数据第一级是第二级是广东第二级是广西第三级是玉林第三级是北流广东广州天河白云广西玉林北流深圳东莞松山湖部分获取省一级递归结构形式数据数据广东广州天河白云深圳东莞松山湖广西玉林北流部分获取省一级递归两者区别数据表形式数据递 效果图 showImg(https://segmentfault.com/img/bVbi519?w=883&h=437); mysql表结构形式...

    HitenDev 评论0 收藏0
  • 前端开发文档

    摘要:最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。 最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。地址:前端开发文档 全栈开发 HTML5/CSS3 HTML元素 语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南 弹性图...

    JerryC 评论0 收藏0
  • 前端开发文档

    摘要:最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。 最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。地址:前端开发文档 全栈开发 HTML5/CSS3 HTML元素 语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南 弹性图...

    binta 评论0 收藏0
  • 前端开发文档

    摘要:最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。 最近在整理全栈开发方面的技术细节,写成文档方便工作中查找,在这里分享这个站点。地址:前端开发文档 全栈开发 HTML5/CSS3 HTML元素 语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南 弹性图...

    Yi_Zhi_Yu 评论0 收藏0

发表评论

0条评论

wangbjun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<