折叠菜单slideUp
<!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" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<title>无标题文档</title>
</head>
<body>
<div id="menu">
<h1>菜单1</h1>
<ul class="show">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
<h1>菜单2</h1>
<ul>
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
</ul>
<h1>菜单3</h1>
<ul>
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</div>
</body>
</html>
<script src="js/jQuery1.7.js"></script>
<script src="js/menu.js"></script>
@charset "utf-8";
/* CSS Document */
body{padding:0px;margin:0px; font-size:12px; font-family:"宋体"}
ul,ol,dl,dd,dt,h1,h2,h3,h4,p,span,form,input,tr,td{padding:0px; margin:0px;}
ul,ol{ list-style:none;}
img{border:none;}
a{ text-decoration:none; color:#333;}
.clear{ clear:both}
img,input{ vertical-align:middle;}
#menu{ width:300px; border:1px solid #09C; margin:100px auto;}
#menu h1{ height:25px; background:#ccc; color:#333; font-size:14px; font-weight:bolder; line-height:25px; text-align:center;cursor:pointer;}
#menu ul{ display:none;}
#menu .show{ display:block;}
#menu li{ height:20px; background:#999; color:#000; line-height:20px; text-align:center; }
#menu li.hover{ background:#0f0;}
$(document).ready(function(){
$("h1").bind("click",function(){
$("ul").hide();
$(this).next().slideDown(); });
$("li").bind("mouseover",function(){
$(this) .addClass("hover"); }).bind("mouseout",function(){
$(this).removeClass("hover");
});
});
折叠菜单slideUp的更多相关文章
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- [转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
- JQuery案例：折叠菜单
折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...
- 滑动式折叠菜单 － Slashdot's Menu
折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- cocos2dx-lua使用UIListView制作二级折叠菜单
折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...
- JS三级折叠菜单特效 自动收缩其它级
真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...
随机推荐
- 原生JS操作AJAX
1,get方式的AJAX function sendAjaxReq() { //1,创建ajax引擎 XMLHttpRequest对象 var req = new XMLHttpRequest() | ...
- BZOJ 2594 水管局长数据加强版（动态树）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2594 题意:给出一个无向图,边有权值.定义一条路径的长度为该路径所有边的最大值.两种操作 ...
- C# 取form表单的数据
//key代表form表单中html元素的name属性值 public static string StringForm(string key) { string result = null; res ...
- 安装PyInstaller打包python
安装PyInstaller 对于那些网络比较稳定,能够流畅使用pip源地址的用户,直接下面的命令就可以搞定: pip install pyinstaller 通常我们会下载源码包,然后进入包目录,执行 ...
- v-model双向数据绑定
v-model双向数据绑定的修饰符 .lazy:失去焦点时数据进行双向的绑定 v-model.lazy=”message ” .number:前面输入数字,后面接着字母自动去除掉.v-model. n ...
- MongoDB树形结构表示法
http://docs.mongodb.org/manual/tutorial/model-tree-structures/ MongoDB五种树形结构表示法 第一种:父链接结构 db.categor ...
- java代码实现highchart与数据库数据结合完整案例分析（二）---折线图
作者原创:未经博主允许不许转载 在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客. 现在分析和展示折线图的绘制和案例分析, 先展示效果图: 与饼状图不同的是,折线图展现更多的数 ...
- POJ 2104 K-th Number（主席树模板题）
http://poj.org/problem?id=2104 题意:求区间$[l,r]$的第k小. 思路:主席树不好理解啊,简单叙述一下吧. 主席树就是由多棵线段树组成的,对于数组$a[1,2...n ...
- UVa 1614 奇怪的股市
https://vjudge.net/problem/UVA-1614 题意:输入一个长度为n的序列a,满足1<=ai<=i,要求确定每个数的正负号,使得所有数的总和为0. 思路:贪心部分 ...
- linux设置端口转发（一键设置）
linux设置端口转发 #下载rinetd程序并进入文件夹 wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xv ...