对于在网页上展现的课本目录这样的多级菜单,想要实现“完整显示某一章的目录,其它章只显示章名”的效果,最开始用的是 "hide all child elements but first" 做为关键字搜索,可是找到的语句 $(".unfocused").not(":first-child").hide();
并无效果。次日早上再看这段代码的时候,决定逐语句测试,发现最开始的 $(".unfocused")
语句获得的是一个 Object 数组,这样直接隐藏第一个子节点以后的子节点的话,会把其他各章的章标题都隐藏掉。(注:各章 div 标签的类名为 unfocused
,需完整显示的那一章的类名为 focused
。)javascript
后来想到能够用 each()
方法来隐藏每一章的非首个子节点,可是该方法后面须要跟匿名函数,这时在 StackOverflow 上看到了一个经过 CSS 后代选择器来选择子节点的方法,突然想到本身能够用父节点的类名加上子元素选择器来隐藏各章的非首个子节点,$(".unfocused > div:not(:first-child)").hide()
,一行语句就搞定了,so good!java
不过最后在网页源码中测试的时候,发现语句又没有生效,检查了一下代码,原来是语句没有写完整,下面的语句中,最后一行的圆括号和分号都给漏掉了,真是粗心……数组
<script type="text/javascript"> $(document).ready(function() { $(".unfocused > div:not(:first-child)").hide(); }); </script>