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 变量命名规则
Sep 23 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Bootstrap Table使用整理(一)
Jun 09 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php生成随机数的三种方法
2014/09/10 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python中requests库session对象的妙用详解
2017/10/30 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书
新年团拜会主持词
2014/04/02 职场文书
篮球比赛策划方案
2014/06/05 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python