jQuery入门学习笔记(二)【手风琴效果】

今天学习了手风琴的效果,也就是类似于QQ菜单的那种。

这里我的习惯依然是在DW里面写好复制过来——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YFY TEST 手风琴效果</title>
<script src=\'#\'" type="text/javascript"></script>
<script src=\'#\'" type="text/javascript"></script>
<style>
#Nav,#Nav ul {list-style-type:none;margin: 0;padding: 0;width: 15em;}
#Nav a{ display:block;}
#Nav li a {background: #333;color: #fff;}
#Nav li a:hover {background: #000;}
#Nav li ul li a {background: #ccc;color: #000;padding-left: 20px;}
</style>
</head>

<body>
<h2>YFY手风琴效果测试</h2>
<ul id="Nav">
 <li>
     <a href="#">测试第一行</a>
     <ul>
         <li><a href="#">第一行</a></li>
            <li><a href="#">第一行</a></li>
            <li><a href="#">第一行</a></li>
        </ul>
    </li>
    <li>
     <a href="#">测试第二行</a>
     <ul>
         <li><a href="#">第二行</a></li>
            <li><a href="#">第二行</a></li>
            <li><a href="#">第二行</a></li>
        </ul>
    </li>
    <li>
     <a href="#">测试第三行</a>
     <ul>
         <li><a href="#">第三行</a></li>
         <li><a href="#">第三行</a></li>
         <li><a href="#">第三行</a></li>
        </ul>
    </li>
</ul>
</body>
</html>
 

——————————————我是华丽的分割线——————————————

效果一:

function Nav01() {
  $('#Nav ul').hide(); 
  $('#Nav li a').click(
    function() {
        $(this).next().slideToggle('normal');  //  学到的知识:slideUp | slideDown | slideToggle,up是收起,Down是展开,toggle是判断,当前若为收起的就展开,展开的则收起。默认为 "normal"。这里控制速度,可以精确到毫秒 比如设置个数值1000,或者1,或者slideToggle('slow');slideToggle('fast');。
      }
    );
  }
$(document).ready(function() {Nav01();});

——————————————我是华丽的分割线——————————————

效果二:

未完待续。。

 

你可能感兴趣的:(jquery,手风琴效果)