用jQuery实现三级下拉菜单

来源：互联网发布：网络女主播视频六间房编辑：程序博客网时间：2024/05/22 01:29

这篇文章是我借鉴别人文章的基础，自己练了一遍并加了一些自己的想法进去，现总结如下：

咱们先看一下设计图：

1,2,3是主菜单，点击1的时候出现1-1,1-2,1-3再次点击 1-2的时候出现1-2-1,1-2-......功能以此类推

这就是功能展示，那么我们如何通过jQuery来实现呢？

思路：

先用ul列表来布局，并且刚开始的时候下拉菜单都是隐藏状态的显然有用到一个关键的css属性：display：none;
菜单1,2,3点击的时候能变色，而且相应的下拉菜单会显示（一级菜单能点击-能变色-能下拉）
以1-1，1-2,1-3这个下拉菜单为例，划过每一个会相应的变色并且当划过每一个菜单的时候会出现例如1-2-1,1-2-2,1-2-3,1-2-4的情况（二级菜单能点击-能变色-能下拉）
鼠标划过1-2-1,1-2-2,1-2-3,1-2-4时也会出现相应的变色（三级菜单能变色）
以此类推三级菜单能点击-能变色-能下拉，四级能，五级.......

大体功能分析完毕下面展示我所写的代码：

我的css代码：

*,::before,::after {  margin: 0;  padding: 0;}ul {  list-style: none;}a {  text-decoration: none;  line-height: 100px;}.clearfix::after {  content: ".";  display: block;  height: 0;  line-height: 0;  visibility: hidden;  clear: both;}.tx {  text-align: center;}.active {  background: black!important;}ul > li.on > ul {  display: block;}.menu {  width: 300px;  height: 100px;}.menu > li {  width: 100px;  height: 100px;  float: left;}.menu > li > a {  display: block;  width: 100%;  height: 100%;  background: #ffa500;  font-size: 20px;  text-align: center;}.menu > li > ul {  display: none;}.menu > li > ul > li {  width: 100px;  height: 100px;  float: left;  position: relative;}.menu > li > ul > li > a {  display: block;  width: 100%;  height: 100%;  background: #ffa500;  font-size: 20px;  text-align: center;}.menu > li > ul > li > ul {  position: absolute;  left: 100px;  top: 0;}.menu > li > ul > li > ul li {  width: 100px;  height: 100px;  float: left;}.menu > li > ul > li > ul li a {  display: block;  width: 100%;  height: 100%;  background: #ffa500;  font-size: 20px;  color: red;  text-align: center;}

我的html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/menu.css"/></head><body><ul class="menu clearfix"><li><a href="javascript:;">1</a><ul><li><a href="javascript:;">1-1</a><ul class="clearfix"><li><a href="javascript:;">1-1-1</a></li><li><a href="javascript:;">1-1-2</a></li><li><a href="javascript:;">1-1-3</a></li></ul></li><li><a href="javascript:;">1-2</a><ul class="clearfix"><li><a href="javascript:;">1-2-1</a></li><li><a href="javascript:;">1-2-2</a></li><li><a href="javascript:;">1-2-3</a></li></ul></li><li><a href="javascript:;">1-3</a><ul class="clearfix"><li><a href="javascript:;">1-3-1</a></li><li><a href="javascript:;">1-3-2</a></li><li><a href="javascript:;">1-3-3</a></li></ul></li></ul></li><!--以下两个不再重复--><li><a href="javascript:;">2</a><ul><li><a href="javascript:;">1-1</a><ul class="clearfix"><li><a href="javascript:;">2-1-1</a></li><li><a href="javascript:;">2-1-2</a></li><li><a href="javascript:;">1-1-3</a></li></ul></li><li><a href="javascript:;">1-2</a><ul class="clearfix"><li><a href="javascript:;">1-2-1</a></li><li><a href="javascript:;">1-2-2</a></li><li><a href="javascript:;">1-2-3</a></li></ul></li><li><a href="javascript:;">1-3</a><ul class="clearfix"><li><a href="javascript:;">1-3-1</a></li><li><a href="javascript:;">1-3-2</a></li><li><a href="javascript:;">1-3-3</a></li></ul></li></ul></li><li><a href="javascript:;">3</a><ul><li><a href="javascript:;">1-1</a><ul class="clearfix"><li><a href="javascript:;">1-1-1</a></li><li><a href="javascript:;">1-1-2</a></li><li><a href="javascript:;">1-1-3</a></li></ul></li><li><a href="javascript:;">1-2</a><ul class="clearfix"><li><a href="javascript:;">1-2-1</a></li><li><a href="javascript:;">1-2-2</a></li><li><a href="javascript:;">1-2-3</a></li></ul></li><li><a href="javascript:;">1-3</a><ul class="clearfix"><li><a href="javascript:;">1-3-1</a></li><li><a href="javascript:;">1-3-2</a></li><li><a href="javascript:;">1-3-3</a></li></ul></li></ul></li></ul></body><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/menu.js"></script></html>

我的js文件

$(document).ready(function(){//当鼠标悬浮的时候给所有的添加背景色$(".menu li a").hover(function(){$(this).addClass("active");//a标签的兄弟元素ul的css样式如果是display：none;就让其的slidedownif($(this).siblings("ul").css("display") == "none"){$(this).siblings("ul").slideDown(300);if($(this).parent("li").siblings("li").children("ul").css("display") == "block"){console.log(1)$(this).parent("li").siblings("li").children("ul").css("display","none");}else{ //控制自身菜单下子菜单隐藏//     $(this).siblings('ul').slideUp(200);     //控制自身菜单下子菜单隐藏     $(this).siblings('ul').children('li').children('ul').slideUp(200);}}},function(){$(this).removeClass("active");$(this).parent("li").siblings("li").children("ul").css("display","none");})})

以上内容出现了bug而且我跳入其中根本不知道自己错在了哪里，好悲剧

下面网上资源正确的两种写法:

1.简洁的写法

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery三级下拉列表导航菜单</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css">*{margin: 0; padding: 0;}body{ font-size: 12px; }li{ list-style: none;}ul.nav li{ width: 200px; text-align:center;}ul.nav > li{ float: left; margin-right:10px;}ul.nav li h3{height: 40px; line-height: 40px;}ul.nav > li > h3{ background: #72a7ff;}ul.nav > li > ul > li h3{ background: #ffd9d9;}ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}ul > li > ul{ display: none;}ul > li.on > ul{ display: block;}ul.nav li{ position: relative;}ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}</style> <script type="text/javascript"> $(document).ready(function() { $("ul.nav li").hover(function(){  $(this).addClass("on");  }, function(){  $(this).removeClass("on");  }) });  $(document).ready(function() { $("ul.nav li").hover(function(){  $(this).parent("ul").siblings("h3").addClass("choice");  }, function(){  $(this).parent("ul").siblings("h3").removeClass("choice"); }) });  $(document).ready(function() {   if ($("ul.nav li").find("ul") .html()!="") {  $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>");    } });</script>  </head><body><ul class="nav"> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3>  <ul>  <li><h3>4级分类</h3>   <ul>   <li><h3>5级分类</h3></li>   <li><h3>5级分类</h3></li>   <li><h3>5级分类</h3></li>   <li><h3>5级分类</h3></li>   </ul>  </li>  <li><h3>4级分类</h3></li>  <li><h3>4级分类</h3></li>  <li><h3>4级分类</h3></li>  </ul>  </li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> </ul> </li> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> </ul> </li> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> </ul> </li> <li><h3>我的网站</h3> <ul> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> <li><h3>2级分类</h3>  <ul>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  <li><h3>3级分类</h3></li>  </ul> </li> </ul> </li></ul> </body></html>

2.复杂的写法

<body> <aside>  <ul class="one">   <li> <a href="#" class="a">目录A</a>    <ul class="two" style="display: none">     <li><a href="#" class="a">二级目录A</a>      <ul class="three" style="display: none">       <li><a href="#">三级目录A</a></li>      </ul>     </li>     <li><a href="#" class="a">二级目录B</a></li>     <li><a href="#" class="a">二级目录C</a></li>    </ul>   </li>   <li> <a href="#" class="a">目录B</a>    <ul class="two" style="display: none">     <li><a href="#" class="a">二级目录A</a>      <ul class="three" style="display: none">       <li><a href="#">三级目录A</a></li>      </ul>     </li>     <li><a href="#" class="a">二级目录B</a></li>     <li><a href="#" class="a">二级目录C</a></li>    </ul>   </li>   <li> <a href="#" class="a">目录C</a> </li>  </ul> </aside> //jQuery部分<script src="js/jquery-1.8.3.min.js"></script><script>  $(document).ready(function() {   $('.a').click(function() {    if ($(this).siblings('ul').css('display') == 'none') {     $(this).siblings('ul').slideDown(100).children('li');     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {      $(this).parents('li').siblings('li').children('ul').slideUp(100);      }    } else {     //控制自身菜单下子菜单隐藏     $(this).siblings('ul').slideUp(100);     //控制自身菜单下子菜单隐藏     $(this).siblings('ul').children('li').children('ul').slideUp(100);    }   }); });</script></body>

我还要继续研究是怎么错的，脑袋都大了！！！

0 0