JQ写简单的伸缩菜单（内附效果图和源代码）
效果如图：
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写简单的伸缩菜单（内附效果图和源代码）的更多相关文章
- JQ写下拉列表项目移动（内附效果图和源代码）
效果图如下: 实现功能:点击第一个按钮,让选中的对象从左边移动到右边: 点击第二个按钮,让左边的所有对象移动到右边: 点击第三个按钮,让选中的对象从右边边移动到左边: 点击第四个按钮,让右边的所有 ...
- Jq写个联级菜单
这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
- 手写简单的jq雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
- MIT挑战（如何在12个月内自学完成MIT计算机科学的33门课程|内附MIT公开课程资源和学习顺序
译者注:本文译自Scott H. Young的博客,Scott拥有超强的学习能力,曾在12个月内自学完成麻省理工学院计算机科学的33门课程.本文就是他个人对于这次MIT挑战的介绍和总结. 版权声明:本 ...
- 电机噪声之谐波分析（内附simulink中FFT分析的相关参数配置与解析）
电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 目录 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 写在前面 正文 电机噪声 谐波的产生 什么 ...
- 从零开始学数据分析，什么程度可以找到工作？（ 内附20G、5000分钟数据分析工具教程大合集 ）
从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 ) 我现在在Coursera上面学data science 中的R programming,过去很少接 ...
- 不要困在自己建造的盒子里——写给.NET程序员（附精彩评论）
此文章的主旨是希望过于专注.NET程序员在做好工作.写好.NET程序的同时,能分拨出一点时间接触一下.NET之外的东西(例如10%-20%的时间),而不是鼓动大家什么都去学最后什么都学不精,更不是说. ...
- jq倾斜的动画导航菜单
效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...
随机推荐
- IOS第二天多线程-04简化单例模式
******HMSingleton-ARC.h // .h文件 #define HMSingletonH(name) + (instancetype)shared##name; // .m文件 #de ...
- mac自定义安装nodejs步骤
自定义安装的好处是nodejs相关的文件都在同一个文件夹下,且不与其它程序的文件混合在同一文件夹下. 1.下载node并解压缩:https://nodejs.org/dist/,选择tar.gz包下载 ...
- 检测PC端和移动端的方法总结（转）
正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针 ...
- 【翻译】How To Tango With Django 1.5.4 第三章
django基础 3.1测试你的配置 测试你的python版本和你的django版本是否兼容 3.2新建django工程 在dos里面进到你事先新建的code文件夹,然后在执行下列命令新建工程 c:\ ...
- ASP.NET MVC 5 中 使用富文本编辑器 Ueditor
一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...
- 简单实用的双向电平转换电路（3.3v-5v）
当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...
- CSS之border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 配置maven仓库
1.安装完,配置好环境变量 mvn -v 检查是否成功 mvn install 会将项目生成的构件安装到本地maven仓库 2.settings.xml文件配置: 1)修改本地仓库位置 maven_h ...
- iOS: 上传App到AppStore，由于Xcode上传太慢，换成Application Loader上传，速度秒传
一.遇到的遭遇 在之前的项目开发中,本人有点固执,一直采用xcode打包后再上传,结果可想而知: (1)要么上传时速度慢的跟蜗牛似的,等的我心力交瘁(不排除网络不给力的原因,公司这个吊问题快把我气疯了 ...
- jqGrid使用记录
一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel=" ...