Implementing accordion-based expansion and collapse of navigation menu based on jQuery

Implementing accordion-based expansion and collapse of navigation menu based on jQuery_jquery

WBOY

Release： 2016-05-16 15:17:09

Original

1302 people have browsed it

This chapter shares a code example, which implements the effect of expanding and collapsing the navigation menu in accordion mode.

Code examples are as follows:

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">脚本之家一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">脚本之家</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

Copy after login

The above code achieves our requirements. Here is an introduction to its implementation process.

1. Code comments:

(1).$(document).ready(function(){}), when the document structure is completely loaded, execute the code in the function.
(2).$("dd:not(:first)").hide(), all dd elements except the first dd element are hidden, that is, the submenu of the first navigation menu is expanded, and the others are hidden .
(3).$("dt a").click(function(){}), register the click event processing function for the a element under the dt element.
(4).$("dd:visible").slideUp("slow"), all displayed dd elements are shrunk and hidden through animation.
(5).$(this).parent().next().slideDown("slow"), the parent element currently connected to the a element is the dt element, and the next element of the dt element is the secondary menu dd element. This menu expands animatedly.
(6).return false, this is very important to prevent the link from jumping.

The above is what I share with you how to expand and collapse the navigation menu in accordion mode based on jQuery. I hope it will be helpful to everyone.