jQuery implements expandable and collapsed accordion panel menu

jQuery implements expandable and collapsed accordion panel menu_jquery

WBOY

Release： 2016-05-16 15:39:16

Original

1217 people have browsed it

The example in this article describes how jQuery implements an accordion panel menu that can be expanded and collapsed. Share it with everyone for your reference. The details are as follows:

This is a common folding menu, an accordion folding panel that will expand and collapse with a Flash animation effect. Please note when modifying:

slideUp: Dynamically hide all matching elements by changing their height (decreasing upward), optionally triggering a callback function after hiding is completed. This animation effect only adjusts the height of the element, allowing matching elements to be hidden in a "sliding" manner.

slideDown: Dynamically display all matching elements through height changes (increasing downward), optionally triggering a callback function after the display is completed. This animation effect only adjusts the height of the element, allowing the matching elements to be displayed in a "sliding" manner

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-slide-up-down-sfq-style-menu-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>折叠菜单</title>
<script src="jquery1.3.2.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide(); //隐藏 dd不是第一个的. E:first:相当于E:eq(0) 
// $("dd:not(:last)").hide(); //试试$("dd:not(:last)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
 $(this).parent().next().slideDown("slow");
return false;
});
});
</script> 
<style>
 dl { width: 150px; }
 dl,dd { margin: 0; }
 dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000;font-size: 12px; }
 ul { list-style: none; padding: 2px; }
</style>
</head>
<body>
<dl>
<dt><a href="#">ASP</a></dt>
 <dd>
 <ul>
  <li><a href="#">论坛社区</a></li>
  <li><a href="#">新闻文章</a></li>
  <li><a href="#">企业网站</a></li>
 </ul>
 </dd>
<dt><a href="#">PHP</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="#">JQUERY</a></li>
  <li><a href="#">JAVASCRIPT</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.