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中单选框和复选框获取值的方式
Nov 06 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
js函数调用的方式
May 06 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 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类
2006/07/15 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
python搭建虚拟环境的步骤详解
2016/09/27 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python基于百度云文字识别API
2018/12/13 Python
Python中Selenium库使用教程详解
2020/07/23 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
保险经纪人求职信
2014/03/11 职场文书
纠纷协议书
2014/04/16 职场文书
检讨书格式
2015/01/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android