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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
vue 组件内获取actions的response方式
Nov 08 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树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
jquery实现直播弹幕效果
2019/11/28 jQuery
理解JavaScript中的对象
2020/08/25 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现Decorator模式实例代码
2018/02/09 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python版中国省市经纬度
2020/02/11 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python设计密码强度校验程序
2020/07/30 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
12岁生日感言
2014/01/21 职场文书
付款委托书范本
2014/04/04 职场文书
小学运动会口号
2014/06/07 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
继承公证书格式
2015/01/26 职场文书
辞职信标准格式
2015/02/27 职场文书
观后感格式
2015/06/19 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Golang 结构体数据集合
2022/04/22 Golang