点击标题下拉展开二级子标题导航菜单
分类：实例代码
本章节分享一段代码实例，它实现了鼠标点击标题能够下拉展开二级子标题效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">#menu{width:300px;}
.has_children{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight{
color:#fff;
background :green;
}
div{padding:0;}
div a{
background:#888;
display:none;
float:left;
width:300px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>div css教程</span>
<a>第一章节</a>
<a>第二章节</a>
<a>第三章节</a>
</div>
<div class="has_children">
<span>javascript教程</span>
<a>第一章节</a>
<a>第二章节</a>
<a>pipipi.net</a>
</div>
<div class="has_children">
<span>正则表达式教程</span>
<a>第一章节</a>
<a>第二章节</a>
<a>第三章节</a>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档机构加载完毕再去执行函数中的代码。
（2）.$(".has_children").click(function(){})，为具有处class属性值为has_children注册click事件处理函数。
（3）.$(this).addClass("highlight")，为当前元素增加highlight类。
（4）.children("a").show().end()，将子节点的a元素显示出来并重新定位到上次操作的元素。
（5）.siblings().removeClass("highlight")，获取元素的兄弟元素，并去掉他们的highlight类。
（6）.children("a").hide()，将兄弟元素下的a元素隐藏。
二.相关阅读:
（1）.addClass()参阅jQuery addClass()一章节。
（2）.children()参阅jQuery children()一章节。
（3）.siblings()参阅jQuery siblings()一章节。
（4）.end()参阅jQuery end()一章节。
（5）.removeClass()参阅jQuery removeClass()一章节
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu