您当前的位置: 首页 » JavaScript/JQuery编程 » 用jquery写一个简单的菜单伸缩效果
用jquery写一个简单的菜单伸缩效果
论坛链接
先看下效果图吧！其实是一个很简单的东西。只是对以前的知识复习下。这里就不做详细说明了，懂得jQuery的选择器和效果就行了。
jQuery的代码如下：
jQuery(document).ready(function(){
jQuery("dd:not(:first)").hide();
jQuery("dt a").click(function(){
jQuery("dd:visible").slideUp("slow");
jQuery(this).parent().next().slideDown("slow");
return false;
});
});
在上面我们用到了jQuery的”:not”，”:first”，”:visible”，”.parent(Selector) “，”.next(Selector) “这几个选择器以及jQuery的滑动效果”slideUp”，”slideDown”；
不明白可以去参照JQ的参考文档。完整的实例请运行下面的代码！
<!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" xml:lang="en-us">
<head>
<title>用jquery写一个菜单伸缩效果</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("dd:not(:first)").hide();
jQuery("dt a").click(function(){
jQuery("dd:visible").slideUp("slow");
jQuery(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; }
dl,dt,dd,ul {margin: 0; padding: 0;}
dl{margin-top: 150px;}
dt { margin-top: 2px;}
dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px; padding-left: 5px; color: #FFF; background: #73C5E5;}
dd {width: 303px; border: 1px solid #73C5E5;}
ul li{list-style: none; padding: 5px; text-align: left; }
</style>
</head>
<body>
<dl>
<dt><a href="http://leotheme.cn/">jQuery</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Download</a></li>
<li><a href="http://leotheme.cn/">Documentation</a></li>
<li><a href="http://leotheme.cn/">Blog</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn//discuss/">JavaScript</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Mailing List</a></li>
<li><a href="http://leotheme.cn/">Tutorials</a></li>
<li><a href="http://leotheme.cn/">Demos</a></li>
<li><a href="http://leotheme.cn/">Plugins</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn/">WordPress</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Themes</a></li>
<li><a href="http://leotheme.cn/">plugins</a></li>
<li><a href="http://leotheme.cn/">languages</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn/">Themes</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">BlueSky</a></li>
<li><a href="http://leotheme.cn/">Maxthon v2.0</a></li>
<li><a href="http://leotheme.cn/">simple-line</a></li>
</ul>
</dd>
</dl>
</body>
</html>
演示地址:http://leotheme.cn/javascript/jquery-for-nav-slide.html
jQuery的代码如下：
jQuery(document).ready(function(){
jQuery("dd:not(:first)").hide();
jQuery("dt a").click(function(){
jQuery("dd:visible").slideUp("slow");
jQuery(this).parent().next().slideDown("slow");
return false;
});
});
在上面我们用到了jQuery的”:not”，”:first”，”:visible”，”.parent(Selector) “，”.next(Selector) “这几个选择器以及jQuery的滑动效果”slideUp”，”slideDown”；
不明白可以去参照JQ的参考文档。完整的实例请运行下面的代码！
<!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" xml:lang="en-us">
<head>
<title>用jquery写一个菜单伸缩效果</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("dd:not(:first)").hide();
jQuery("dt a").click(function(){
jQuery("dd:visible").slideUp("slow");
jQuery(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; }
dl,dt,dd,ul {margin: 0; padding: 0;}
dl{margin-top: 150px;}
dt { margin-top: 2px;}
dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px; padding-left: 5px; color: #FFF; background: #73C5E5;}
dd {width: 303px; border: 1px solid #73C5E5;}
ul li{list-style: none; padding: 5px; text-align: left; }
</style>
</head>
<body>
<dl>
<dt><a href="http://leotheme.cn/">jQuery</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Download</a></li>
<li><a href="http://leotheme.cn/">Documentation</a></li>
<li><a href="http://leotheme.cn/">Blog</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn//discuss/">JavaScript</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Mailing List</a></li>
<li><a href="http://leotheme.cn/">Tutorials</a></li>
<li><a href="http://leotheme.cn/">Demos</a></li>
<li><a href="http://leotheme.cn/">Plugins</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn/">WordPress</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">Themes</a></li>
<li><a href="http://leotheme.cn/">plugins</a></li>
<li><a href="http://leotheme.cn/">languages</a></li>
</ul>
</dd>
<dt><a href="http://leotheme.cn/">Themes</a></dt>
<dd>
<ul>
<li><a href="http://leotheme.cn/">BlueSky</a></li>
<li><a href="http://leotheme.cn/">Maxthon v2.0</a></li>
<li><a href="http://leotheme.cn/">simple-line</a></li>
</ul>
</dd>
</dl>
</body>
</html>
演示地址:http://leotheme.cn/javascript/jquery-for-nav-slide.html