<!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的更多相关文章

  1. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  4. JQuery案例：折叠菜单

    折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...

  5. 滑动式折叠菜单 － Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  6. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  7. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  9. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

随机推荐

  1. 微信小程序——3、逻辑js文件

    逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...

  2. 实验二Java面向对象程序设计

    一.单元测试 了解三种代码: 1.伪代码:类似于自然语言说明,描述实现逻辑思维 2.产品代码:程序员编辑的开发代码,要求可修改.可移植 3.测试代码:我理解是相当于开发软件在软件开放之前,程序员找到b ...

  3. Program Size

    在Keil中编译工程成功后,在下面的Bulid Ouput窗口中会输出下面这样一段信息: Program Size: Code=6320  RO-data=4864  RW-data=44  ZI-d ...

  4. 51NOD 1066 Bash游戏

    1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的 ...

  5. Unity3D学习笔记（十二）：2D模式和异步资源加载

    2D模式和3D模式区别:背景纯色,摄像机2D,没有深度轴 精灵图片设置 Normal map,法线贴图,更有立体感 Sprite (2D and UI),2D精灵贴图,有两种用途 1.当做UI贴图 2 ...

  6. shell 逻辑操作符

    Shell还提供了与( -a ).或( -o ).非( ! )三个逻辑操作符用于将测试条件连接起来,其优先级为:"!"最高,"-a"次之,"-o&qu ...

  7. 聊一聊 Cloud Native 与12-Factor

    12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则.Cloud Native架构中使用12-Factor作为设计准则. 12-Factor 的目标在于: ...

  8. Java知识集锦

    Java知识集锦 一.Java程序基础 1.1 开发和运行环境 1.2 Java语言概述 二.Java语法基础 2.1 基础类型和语法 2.2 对象和类型 2.3 包和访问控制 三.数据类型及类型转换 ...

  9. yii CFormModel中的rules验证机制

    public function rules() { return array( array('username, password', 'required'), array('rememberMe', ...

  10. 雷林鹏分享：Ruby 注释

    Ruby 注释 注释是在运行时会被忽略的 Ruby 代码内的注释行.单行注释以 # 字符开始,直到该行结束,如下所示: #!/usr/bin/ruby -w # 这是一个单行注释. puts &quo ...