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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
angular简介和其特点介绍
Jan 29 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
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连mysql和oracle数据库性能比较
2006/10/09 PHP
php实现文件下载更能介绍
2012/11/23 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
js中apply方法的使用详细解析
2013/11/04 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python查询IP地址归属完整代码
2017/06/21 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
详解Python中的动态属性和特性
2018/04/07 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
写演讲稿要注意的六件事
2014/01/14 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
旅游市场营销方案
2014/03/09 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
关于环保的演讲稿
2014/05/10 职场文书
2014年国庆标语
2014/06/30 职场文书
骨干教师申报材料
2014/12/17 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
python运行脚本文件的三种方法实例
2022/06/25 Python