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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
javascript操作css属性
2013/12/30 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
vue中监听返回键问题
2019/08/28 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python 列表理解及使用方法
2017/10/27 Python
Python温度转换实例分析
2018/01/17 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python如何实现数据的线性拟合
2019/07/19 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
白酒市场开发计划书
2014/01/09 职场文书
机电一体化求职信
2014/03/10 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
工作保证书怎么写
2015/02/28 职场文书
小平您好观后感
2015/06/09 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
MySQL创建管理子分区
2022/04/13 MySQL