Home > Article > Web Front-end > Implementing accordion-based expansion and collapse of navigation menu based on jQuery_jquery

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

WBOYOriginal: 2016-05-16 15:17:091238browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the usage and differences of this, call and apply in JavaScriptNext article：Detailed explanation of the usage and differences of this, call and apply in JavaScript

See more

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

Related articles