菜单伸缩实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单伸缩实例</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var $dt=$("dl#two dt.two2");
$dt.nextAll("dd,span").slideUp();
$dt.click(function(){
$dt.prevAll("dd,span").slideUp();
$dt.nextAll("dd,span").slideDown();
});
$("dl#two dt.two1").click(function(){
var $self=$(this);
$dt.prevAll("dd,span").slideDown();
$dt.nextAll("dd,span").slideUp();
});
});
</script>
<style>
*{padding:0;margin:0;color:#000;}
a{text-decoration:none;}
dl{background:#eee;width:100px;}
dt{font-weight:bold;cursor:pointer;}
dt,dd{width:100px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
</style>
</head>
<body>
<dl id="two">
<dt class="two1">指标库管理</dt>
<dd><a href="javascript:void(0)">单项工程指标</a></dd>
<dd><a href="javascript:void(0)">综合指标</a></dd>
<dd><a href="javascript:void(0)">单元指标</a></dd>
<span class="">
<dd><a href="javascript:void(0)">分部分项指标</a></dd>
<dd><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd><a href="javascript:void(0)">指标审核</a></dd>
<dd><a href="javascript:void(0)">我的共享指标</a></dd>

<dt class="two2">市政管理</dt>
<dd><a href="javascript:void(0)">单项工程指标</a></dd>
<dd><a href="javascript:void(0)">综合指标</a></dd>
<dd><a href="javascript:void(0)">单元指标</a></dd>
<span>
<dd><a href="javascript:void(0)">分部分项指标</a></dd>
<dd><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd><a href="javascript:void(0)">指标审核</a></dd>
<dd><a href="javascript:void(0)">我的共享指标</a></dd>

</dl>
</body>
</html>

时间: 2024-11-08 23:11:34

菜单伸缩实例的相关文章

CSS3实现的横向二级下拉菜单代码实例

CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果,例如很多网站的导航栏就是这样的二级下拉菜单效果,非常好用,本章节分享一段使用CSS3实现的下拉菜单,当然当下很多浏览器都不支持,不过相信用不了多久这种现状就会被改变.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q

可以固定的顶部的导航菜单简单实例代码

可以固定的顶部的导航菜单简单实例代码:固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con

xmlTree标签树形菜单应用实例:B2C网站部门管理

轻开B2C电子商务网站的部门(组织机构)管理是一个典型的树形菜单应用实例,效果如图 下边介绍一下简单的实现流程 1.存储部门信息的xml文件(轻开B2C电子商务网站base目录下的base/dept.xml文件) <?xml version="1.0" encoding="GBK"?> <D act="base/xml/DShow.html" color="red" weName="小时代"

easyui中layout、accordion加tabs实现简单菜单布局实例

一般对于后台界面都是采用BorderLayout进行布局的.BorderLayout也就是将界面分成五块,如下图所示,分别有:North.East.South.West.Center 其中比较特殊的是Center这块区域,它是不固定的,会随着四块区域的变化而做出相应的调整.比如将West向左缩小10px,那么Center则会向West方向扩张10px.其实这个easyUI已经帮我们实现好了,我们只需要使用它的layout就可以完成. <body class="easyui-layout&q

[xPlugin] jQuery右键菜单contextMenu实例

URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/supercrsky/articles/250091.html 好久没写博客了,今天简单介绍一款jQuery鼠标右键菜单contextMenu,这里首先要感谢 我的漫漫程序之旅(原文http://www.blogjava.net/supercrsky/articles/250091.html).在最近项目中需要

asp.net二级菜单导航 实例

.aspx代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default17.aspx.cs" Inherits="Default17" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

一个下拉菜单的实例

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <style> button{ border:1px solid #ccc; cursor:poi

jquery实现的三级导航菜单实例代码

jquery实现的三级导航菜单实例代码:使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜单的代码也很多,不过相对较少一些,本章节通过一个代码实例详细介绍一下三级导航菜单的实现过程,代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta nam