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


Posted in Javascript onMay 07, 2015

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

Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
jQuery团购倒计时特效实现方法
May 07 #Javascript
js由下向上不断上升冒气泡效果实例
May 07 #Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
You might like
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
帝国cms目录结构分享
2015/07/06 PHP
Javascript - HTML的request类
2006/07/15 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
详解jQuery选择器
2016/12/21 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
大学校庆策划书
2014/01/31 职场文书
银行服务感言
2014/03/01 职场文书
五分钟演讲稿
2014/04/30 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
表扬信范文
2019/04/22 职场文书
二年级作文之动物作文
2019/11/13 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
详细了解java监听器和过滤器
2021/07/09 Java/Android