Home > Article > Web Front-end > jQuery实现的动态伸缩导航菜单实例_jquery

jQuery实现的动态伸缩导航菜单实例_jquery

WBOYOriginal: 2016-05-16 16:00:131272browse

本文实例讲述了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程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javasript实现密码的隐藏与显示_javascript技巧Next article：ubuntu下安装nodejs以及升级的办法_node.js

See more

jQuery实现的动态伸缩导航菜单实例_jquery

Related articles