折叠菜单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 ...
随机推荐
- python的time时间模块
模块概述 1.一个.py文件就是一个模块 2.通过import语句在一个模块中导入另一个模块,import sys,print (sys.path),sys.path的结果为一个列表,列表的第一个元素 ...
- JavaScript闭包 懂不懂由你反正我是懂了
原文链接:http://www.jb51.net/article/28611.htm 越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解 ...
- java读书笔记二
这是我的一些读书笔记: 我研究了一下面向对象: 面向对象符合人类看待事物的一般规律,对象的方法的实现细节是包装的,只有对象方法的实现者了解细节 我觉得面向过程是由过程.步骤.函数组成,过程是核心,面向 ...
- Duilib 控件类html富文本绘制
转载:http://blog.csdn.net/wyansai/article/details/51088896 转载:http://blog.csdn.net/lixiang987654321/ar ...
- IMAP协议命令(详细)
参照:http://www.cnblogs.com/qiubole/archive/2007/11/23/970180.html 转载:http://blog.sina.com.cn/s/blog_5 ...
- 文件IO和标准IO的区别【转】
一.先来了解下什么是文件I/O和标准I/O: 文件I/O:文件I/O称之为不带缓存的IO(unbuffered I/O).不带缓存指的是每个read,write都调用内核中的一个系统调用.也就是一般所 ...
- Notepad++7.5.4 设置主题，使用插件
首先官网下载 Notepad++7.5.4 默认英文转换成中文 下面设置主题: 设置-->语言格式设置 选择主题Obsidian,字体选择等宽字体Consolas,大小为11,选择全局字体,使用 ...
- tornado 如何向html传list变量啊？
py: html:
- circRNA研究手册
环状RNA(circRNA)研究技术手册.doc.pdf (转自:汉恒生物)
- sqlserver 存入DB中的中文乱码
在war包中的appliation.properties中,配置的数据库连接做了修改,也不知道当初为什么这么改 导致存入DB中的中文是??? testaaa.jdbc.type=mssqltestaa ...