折叠多级菜单的实现方法

对于在网页上展示的课本目录这样的多级菜单，想要实现“完整显示某一章的目录，其它章只显示章名”的效果，最开始用的是 "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！

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

  $(document).ready(function() {
    $(".unfocused > div:not(:first-child)").hide();
  });

关键字：JavaScript

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！