jQuery手风琴导航菜单详解

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

本章节分享一个代码实例,它实现了简单的手风琴导航菜单效果。

下面详细介绍一下它的实现过程,需要的朋友可以做一下参考。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.nav ul {
  display: none;
}
.nav ul li {
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.nav div {
  background: #4ecc70;
  width: 100px;
  border-radius: 10px;
  line-height: 34px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.red {
  background: red;
  border-radius: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var changeType = $('.nav').find('div');
  $.each(changeType, function () {
    $(this).on('click', function () {
      if (false == $(this).next().is(':visible')) {
        $('.nav ul').slideUp(300);
      }
      $(this).next().slideToggle(300);
    })
    $('.nav ul:eq(0)').show();
  })
  var hoverType = $('.nav .u').find('li')
  $.each(hoverType, function () {
    $(this).hover(function () {
      $(this).addClass('red').siblings().removeClass('red');
    })
  })
})
</script>
</head>
<body>
<ul class="nav">
  <li>
    <div>前端</div>
    <ul class="u">
      <li>div教程</li>
      <li>css教程</li>
      <li>html教程</li>
      <li>js教程</li>
    </ul>
  </li>
  <li>
    <div>资源</div>
    <ul class="u">
      <li>特效</li>
      <li>模板</li>
      <li>代码</li>
      <li>书籍</li>
    </ul>
  </li>
  <li>
    <div>讨论</div>
    <ul class="u">
      <li>交流</li>
      <li>分享</li>
      <li>互助</li>
      <li>问答</li>
    </ul>
  </li>
</ul>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(2).var changeType = $('.nav').find('div'),获取class属性值为nav元素下的div元素集合。

(3).$.each(changeType, function () {}),遍历changeType集合中的每一个div元素。

(4).$(this).on('click', function () {}),为当前的div元素注册click事件处理函数。

(5).if (false == $(this).next().is(':visible')) {

  $('.nav ul').slideUp(300);

}

如果当前div元素的下一个元素,也就是ul元素不是显示状态.

那么首先首先将所有的ul元素收起(这个保证了只有一个ul元素是展开状态)。

(6).$(this).next().slideToggle(300),展开和关闭的切换。

(7).$('.nav ul:eq(0)').show(),设置第一个ul元素默认是展开的。

(8).var hoverType = $('.nav .u').find('li'),获取ul元素下所有的li元素。

(9).$.each(hoverType, function () {

  $(this).hover(function () {

    $(this).addClass('red').siblings().removeClass('red');

})

}),为每一个li元素注册hover事件处理函数,设置当鼠标悬浮时,背景色变红,移开时恢复。

二.相关阅读:

(1).find()可以参阅jQuery find()一章节。

(2).$.each()可以参阅jQuery.each()一章节。

(3).on()可以参阅jquery on()一章节。

(4).next()可以参阅jQuery next()一章节。

(5).is()可以参阅jQuery is()一章节。

(6).slideUp()可以参阅jQuery slideUp()一章节。

(7).slideToggle()可以参阅jQuery slideToggle()一章节。

(8).:eq()可以参阅jQuery :eq()一章节。

(9).:visible可以参阅jQuery :visible一章节。

(10).hover()可以参阅jQuery hover事件一章节。

(11).addClass()可以参阅jQuery addClass()一章节。

(12).siblings()可以参阅jQuery siblings()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容