点击标题下拉展开二级子标题导航菜单

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标点击标题能够下拉展开二级子标题效果。

代码实例如下:

<!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

回复

我来回复
  • 暂无回复内容