今天学习了手风琴的效果，也就是类似于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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.2.1.min.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="nav.js" 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();});
——————————————我是华丽的分割线——————————————
效果二：
未完待续。。
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
