信鸽网

jQuery实现可展开合拢的手风琴面板菜单

  作者：bea

本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单。分享给大家供大家参考。具体如下： 这是一款大家都常见的折叠菜单，手风琴折叠面板，会展开和合拢，带点Flash动画效果，修改时请注意： slideUp : 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 slideDown: 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函

本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单。分享给大家供大家参考。具体如下：


这是一款大家都常见的折叠菜单，手风琴折叠面板，会展开和合拢，带点Flash动画效果，修改时请注意：


slideUp : 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。


slideDown: 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来


运行效果截图如下：



在线演示地址如下：


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


具体代码如下：




<!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>


希望本文所述对大家的jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: