Heim > Artikel > Web-Frontend > jQuery实现的动态伸缩导航菜单实例_jquery
jQuery实现的动态伸缩导航菜单实例_jquery
- WBOYOriginal
- 2016-05-16 16:00:131272Durchsuche
本文实例讲述了jQuery实现的动态伸缩导航菜单。分享给大家供大家参考。具体实现方法如下：
<!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>jquery select</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body {padding:10px; font-family:"宋体"}
* {margin:0; padding:0; font-size:12px;}
a{ color: #333;}
ul,li {
list-style-type:none;
}
.menu_list li a {
display:block; line-height:30px;
text-align:center; height:30px;
background:#e8e8e8; border-bottom:1px solid #ccc;
}
.hover {
background:#e8e8e8;
}
.div1{
height:200px; display:none;
padding:5px;
}
.menu_list{
width:200px; background:#f2f2f2;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$(".menu_list ul li").click(function()
{
if($(this).children(".div1").is(":hidden"))
//判断对象是显示还是隐藏
{
if(!$(this).children(".div1").is(":animated")){
//如果当前没有进行动画，则添加新动画
$(this).children(".div1").animate({height:'show'},1000)
.end().siblings().find(".div1").hide(1000);}
}else{
if(!$(this).children(".div1").is(":animated")){
$(this).children(".div1").animate({height:'hide'},1000)
.end().siblings().find(".div1").hide(1000);}
}
}
);
});
</script>
<div class="menu_list" id="secondpane">
<ul>
<li class="">
<a href="javascript:void(0);" class="a1">网页特效</a>
<div class="div1">js特效,网页特效</div>
</li>
<li class="">
<a href="javascript:void(0);" class="a1">网页模板</a>
<div class="div1">网页模板下载</div>
</li>
<li class="">
<a href="javascript:void(0);" class="a1" style="border:none;">联系我们 </a>
<div class="div1" style="border-top:1px solid #ccc;">关于脚本之家</div>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javasript实现密码的隐藏与显示_javascript技巧Nächster Artikel：ubuntu下安装nodejs以及升级的办法_node.js