效果如图：

JQ代码就那么几句，

<!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" xml:lang="zh-cn">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

	<title>伸缩菜单</title>

	<meta name="keywords" content="关键字列表" />

	<meta name="description" content="网页描述" />

	<link rel="stylesheet" type="text/css" href="" />

	<style type="text/css">

		body,p,ul,li{padding:0px;margin:0px;}

		ul li{list-style:none;}

		body{font-size:13px;}

		.menu{

			width:210px;

			margin:50px auto;

			border:1px solid #ccc;

		}

		.menu p{

			height:25px;

			line-height:25px;

			font-weight:bold;

			background:#eee;

			border-bottom:1px solid #ccc;

			padding-left:5px;

			cursor:pointer;

		}

		.menu ul{display:none;}

		.menu ul li{

			height:24px;

			line-height:24px;

			padding-left:5px;

		}

		.hide{

			display:none;

		}

	</style>

	<script src="jquery.js"></script>

	<script type="text/javascript">

	$(function () {

		$("p").click(function() {

			//点击当前P标记，使P标记的下一个兄弟ul，隐藏或者显示；除了当前P标记的下一个兄弟ul之外，其他的ul都隐藏。

			$(this).next("ul").toggle(1500).siblings('ul').hide(1500);

		});

	});

	</script>

</head>

<body>

	<div id="menu" class="menu">

			<p>web前端</p>

			<ul>

				<li>HTML</li>

				<li>DIV+CSS</li>

				<li>JAVASCRIPT</li>

				<li>jQuery</li>

				<li>Bootstrap</li>

			</ul>

			<p>PHP+MYSQL核心编程</p>

			<ul>

				<li>PHP</li>

				<li>MYSQL</li>

				<li>HTTP协议</li>

				<li>PHP绘图技术</li>

			</ul>

			<p>PHP高级</p>

			<ul>

				<li>XML编程</li>

				<li>AJAX</li>

				<li>MVC</li>

			</ul>

	</div>

</body>

</html>

　　

JQ写简单的伸缩菜单（内附效果图和源代码）的更多相关文章

  1. JQ写下拉列表项目移动（内附效果图和源代码）

    效果图如下: 实现功能:点击第一个按钮,让选中的对象从左边移动到右边: 点击第二个按钮,让左边的所有对象移动到右边: 点击第三个按钮,让选中的对象从右边边移动到左边:   点击第四个按钮,让右边的所有 ...

  2. Jq写个联级菜单

    这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...

  3. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  4. 手写简单的jq雪花飘落

    闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...

  5. MIT挑战（如何在12个月内自学完成MIT计算机科学的33门课程|内附MIT公开课程资源和学习顺序

    译者注:本文译自Scott H. Young的博客,Scott拥有超强的学习能力,曾在12个月内自学完成麻省理工学院计算机科学的33门课程.本文就是他个人对于这次MIT挑战的介绍和总结. 版权声明:本 ...

  6. 电机噪声之谐波分析（内附simulink中FFT分析的相关参数配置与解析）

    电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 目录 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 写在前面 正文 电机噪声 谐波的产生 什么 ...

  7. 从零开始学数据分析，什么程度可以找到工作？（ 内附20G、5000分钟数据分析工具教程大合集 ）

    从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 )   我现在在Coursera上面学data science 中的R programming,过去很少接 ...

  8. 不要困在自己建造的盒子里——写给.NET程序员（附精彩评论）

    此文章的主旨是希望过于专注.NET程序员在做好工作.写好.NET程序的同时,能分拨出一点时间接触一下.NET之外的东西(例如10%-20%的时间),而不是鼓动大家什么都去学最后什么都学不精,更不是说. ...

  9. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

随机推荐

  1. 移除\禁用 jquery mobile 元素样式渲染

    在元素上加属性. data-role="none"

  2. 《Linux内核分析》第六周 读书笔记

    <Linux内核设计与实现>CHAPTER3阅读梳理 [学习时间:3hours] [学习内容:进程的描述:进程的生命周期(包括创建.终结)] 一.进程(任务)描述 1.进程是处于执行期的程 ...

  3. Metasploitable 2系列教程：信息收集

    Metasploitable 2 系统是一个基于ubuntu 的系统.其设计的最初目的为安全工具测试和常见漏洞攻击演示.而在这篇关于 Metasploit 的教程中,我们将列举有关 Metasploi ...

  4. iOS: 上传App到AppStore，由于Xcode上传太慢，换成Application Loader上传，速度秒传

    一.遇到的遭遇 在之前的项目开发中,本人有点固执,一直采用xcode打包后再上传,结果可想而知: (1)要么上传时速度慢的跟蜗牛似的,等的我心力交瘁(不排除网络不给力的原因,公司这个吊问题快把我气疯了 ...

  5. vim - Putting the current file on the Windows clipboard

    http://vim.wikia.com/wiki/VimTip432 command! Copyfile let @*=substitute(expand("%:p"), '/' ...

  6. tomcat access log 参数

    %a - 客户端IP地址 %A - 本机IP地址 %b - 发送字节数,不含HTTP头 如果为空是  '-' %B - 同上 %h - 客户端机器名 (如果connector的enableLookup ...

  7. YL-64 颜色传感器

    TCS3200颜色传感器是一款全彩的颜色检测器,包括了一块TAOS TCS3200RGB感应芯片和4个白光LED灯,TCS3200能在一定的范围内检测和测量几乎所有的可见光.它适合于色度计测量应用领域 ...

  8. html drag 拖拽用法和注意事项

    1.拖拽过程中的事件暂时jQuery里还没有,只能通过html DOM 来进行绑定,不然无法获取dataTransfer对象 2.在dragstart .dragover 等事件中可以用 evt.pr ...

  9. RCNN--对象检测的又一伟大跨越

    最近在实验室和师兄师姐在做有关RCNN的研究,发现这里面坑很深呀,在网上找了一个大牛的博客,准备下来继追OPENCV同时,再来追一个RCNN的学习笔记的博文,博文地址如下:http://blog.cs ...

  10. RF内置库-----内置库的学习过程总结

    前段时间充忙的学习RF,系统学习完之后就开始动手做各种接口的测试,虽然各类的接口测试基本能跑通了,但是重复造车的问题存在太明显.RF本身内置库就已经比较丰富,比如不需要import直接就加载到内存的B ...