search

Home >Web Front-end >JS Tutorial >jQuery implements expandable and collapsed accordion panel menu_jquery

jQuery implements expandable and collapsed accordion panel menu_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:161297browse

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>

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

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：jQuery simply implements the two-level drop-down menu effect code_jqueryNext article：jQuery simply implements the two-level drop-down menu effect code_jquery

Related articles

See more