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

更新时间：2015年05月07日 16:03:58 投稿：shichen2014

这篇文章主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下

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

您可能感兴趣的文章:

jquery连缀语法如何实现
我想熟悉javascript的没有不知道jquery的吧，不得不提的就是特有的连缀书写语法了，jquery连缀语法如何实现，接下来将详细介绍
2012-11-11
自编jQuery插件实现模拟alert和confirm
现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...
2014-09-09
jQuery 选择器、DOM操作、事件、动画
jquery的东西也算不少，记下来有助于以后参考。这样也挺方便。
2010-11-11
jQuery解决iframe高度自适应代码
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。
2009-12-12
jQuery 编程之jQuery 属性选择器
这篇文章主要介绍了jQuery 编程之jQuery 属性选择器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
jQuery+PHP星级评分实现方法
很多网站都应用了星级评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效果。
2015-10-10
多种jQuery绑定事件的实现方式
这篇文章主要为大家详细介绍了多种jQuery绑定事件的实现方式，分享了jQuery防止重复绑定事件的解决方法，感兴趣的小伙伴们可以参考一下
2016-06-06
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。
2010-03-03
jQuery中detach()方法用法实例
这篇文章主要介绍了jQuery中detach()方法用法,以不同实例形式分析了detach()方法删除匹配元素的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制2D双折线图效果,结合实例形式分析了jQuery使用FusionCharts结合xml数据载入实现2D双折线图绘制的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-04-04