Jquery二级简单折叠菜单
写在前面：
1、前端新手
2、欢迎交流
3、
源代码百度云页面示例链接： http://pan.baidu.com/s/1nt0yjd3
链接失效请留言
效果图：
代码部分：jquery部分：
<script>
$(function(){
$("#1,#2").toggle(
function(){
var ss=$(this).attr("id");
$(this).children().parent().next().slideDown(1000);
},
function(){
$(this).children().parent().next().hide(500);
});
}); </script>
HTML部分：
<!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" />
<title></title>
<style>
html{
padding:0px;margin:0px;}
body{
padding:0px;margin:0px;background-color:#f1f2f2;}
a{
text-decoration:none;}
a:hover{
text-decoration:none;
} #left{
float:left;width:210.4px; background-color:#1d6ab2;}
#main{
float:left;width:84.4%;position:absolute;left:210.4px;}
#left table{
margin-left:20px;margin-right:auto;margin-top:4px; text-align:left;}
#left table td{
color:#FFF;font-size:14px;font-family:宋体; font-weight:400;}
#left table td a{
color:#1d6ab2;font-size:12px;font-family:宋体; font-weight:400; background-color:#fff;
border-radius:4px;padding:5px;}
#left table td a:hover{
background-color:#1d6ab2;color:#FFF;
}
#left table td button{
background:#3f85c0;color:#fff;border:0px;padding:6px;border-radius:4px;font-size:12px;
}
#left table td button:hover{
background:#2e2d80;
}
#menu{
width:100%; margin-left:auto; margin-right:auto;margin-bottom:4px;}
#menu1,#menu2{
width:144px;display:none;margin-left:auto; margin-right:auto;clear:left;margin-bottom:3px;margin-top:3px;}
#menu button{
width:100%;height:30px;border:0px;margin:0px 0px 0px 0px; background-color:#1D6ab2;color:#FFF;
font-size:14px;font-family:宋体; font-weight:600;border-radius:1px;
}
#menu button:hover{
background-color:#f1f2f2;color:#1D6ab2;
}
#menu1 a,#menu2 a{
font-size:14px;font-family:宋体; font-weight:600;padding:0px 50px 0px 50px;
background-color:#f1f2f2;color:#1D6ab2; text-align:center;}
#menu1 a:hover,#menu2 a:hover{
background-color:#AAD5E8;color:#1D6ab2;
} </style>
<script src="js/jquery.min.js"></script> </head> <body>
<div id="left" >
<table>
<tr><td>用户名：</td><td>李丽</td></tr>
<tr><td>学 号：</td><td>12</td></tr>
<tr height="30px"><td ><a href="#">[修改资料]</a></td>
<td><a href="#">[修改密码]</a></td></tr>
<tr ><td><button type="button">切换账户</button></td>
<td><button type="button">用户登录</button></td></tr>
</table>
<hr style="border:1px solid #f1f2f2;height:0px;"> <div id="menu" >
<button type="button" id="1" >左边导航 <span style="float:right;margin-right:74px;">></span></button>
<div id="menu1">
<a href="#">text2</a><br>
<a href="#">text2</a><br>
<a href="#">text2</a><br>
<a href="#">text2</a><br>
</div>
<button type="button" id="2">左边导航 <span style="float:right;margin-right:74px;">></span></button>
<div id="menu2">
<a href="#">text2</a><br>
<a href="#">text2</a><br>
<a href="#">text2</a><br>
<a href="#">text2</a><br>
</div>
<button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button>
<button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button>
<button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button>
<button type="button" >左边导航 <span style="float:right;margin-right:74px;">></span></button>
</div> </div>
</body>
</html>
Jquery二级简单折叠菜单的更多相关文章
- JQuery案例：折叠菜单
折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- jquery一个简单的菜单小插件
刚学会封装插件,先来封装一个小的菜单插件 html部分 <ul class="zong"> <li class="yiji"> < ...
- 用JQuery实现简单的菜单隐藏于切换
<锋利的JQuery>第一个demo<!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- jQuery二级下拉菜单
在线演示 本地下载
- 第一百八十九节，jQueryUI，折叠菜单 UI
jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- cocos2dx-lua使用UIListView制作二级折叠菜单
折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
随机推荐
- 《Qt编程的艺术》——5.1 手动布局
在传统的GUI设计中,每个控件(Widget)都要手动地绑定在窗口之上的一个点上(也就是说,这个控件被指定成了给定GUI元素的父对象),同时还要指定这个控件的高度和宽度.作为所有图形元素的基础类,QW ...
- ubuntu中文实训手册
http://people.ubuntu.com/~happyaron/udc-cn/lucid-html/ http://www.apachefriends.org/zh_cn/xampp-linu ...
- Web Service中的XFire 传输List 自定义对象.
我把这个创建的步骤和代码的贴出来,. 首先新建一个工程,取名就随便点啦..MyWebService,然后复制jar包到lib目录下, 创建包,建立接口..写一个javaBean的类, 以下是一个简单的 ...
- 正式软件工作第一天————MVC、ext JS、和clsa
正式上班第一天,引导人就提出了MVC.extjs和clsa 三种框架,在这之前只听说了MVC,但还木有学习过,顺便把学习过程记录下来. MVC——初学习 1.M——model 模型:应用对象,处理业务 ...
- spring 配置和实例
Spring 是一个开源框架.Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring 是一个 IOC(DI) ...
- 自写AES加密解密工具类
此类主要用于加密与解密,采用128位ECB模式,PKCS5Padding填充补位. 可使用方法为加密返回二进制encryptBin(content, key).加密返回十六进制encryptHex(c ...
- Dijkstra算法（迪杰斯塔拉算法）
算法描述: Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法能得出最 ...
- node.js 入门（一）安装
从 https://nodejs.org/ 下载最新版的node.js 下载完成后,双击安装, 一路点击"Next"按钮即可. 等出现上图及表示安装成功. 按"win+r ...
- 「北京」京东 JD.COM 招聘中/高级前端工程师
工作职责: 负责前端界面的前端构建,各类交互设计与实现: 前端样式和脚本的模块设计及优化: 协同后台开发人员完成项目: 职位要求: 专科及以上学历,2年以上前端重构与脚本开发经验,计算机或相关专业者优 ...
- jquery 鼠标右键事件、左键单击事件判定
$(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 retu ...