1： 获取事件源的两种方式

2： overflow 控制展现

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	 <script type="text/javascript">

  		 // 第二种通过this对象获取时间源

  		function list(node){

  			//alert(""");

  			var dlNode = node.parentNode;

  			var nodes = document.getElementsByTagName("dl");

  			//alert(nodes.length);

  			for (var i = 0; i < nodes.length; ++i) {

  				if (nodes[i] == dlNode) {

  					if (nodes[i].className == "close") {

  						nodes[i].className = "open";

  					} else {

  						nodes[i].className = "close";

  					}

  				} else {

  					nodes[i].className = "close";

  				}

  			}

  		}

  		/* 第一种通过event获取时间源

  		function list(){

  			var node = event.srcElement;

  			var dlNode = node.parentNode;

  			var nodes = document.getElementsByTagName("dl");

  			//alert(nodes.length);

  			for (var i = 0; i < nodes.length; ++i) {

  				if (nodes[i] == dlNode) {

  					if (nodes[i].className == "close") {

  						nodes[i].className = "open";

  					} else {

  						nodes[i].className = "close";

  					}

  				} else {

  					nodes[i].className = "close";

  				}

  			}

  		} */

  	 </script>

  	 <style type="text/css">

  	 	.open{

  	 		overflow: visible;

  	 	}

  	 	.close{

  	 		overflow: hidden;

  	 	}

  	 	dl{

  	 		overflow: hidden;

  	 		height: 16px;

  	 	}

  	 </style>

  </head>

  <body>

    <dl>

    	<dt onclick="list(this)">会员管理</dt>

	    	<dd>添加会员</dd>

	    	<dd>删除会员</dd>

	    	<dd>查询会员</dd>

    </dl>

 	<dl>

    	<dt onclick="list(this)">会员管理</dt>

	    	<dd>添加会员</dd>

	    	<dd>删除会员</dd>

	    	<dd>查询会员</dd>

    </dl>

    <dl>

    	<dt onclick="list(this)">会员管理</dt>

	    	<dd>添加会员</dd>

	    	<dd>删除会员</dd>

	    	<dd>查询会员</dd>

    </dl>

    <dl>

    	<dt onclick="list(this)">会员管理</dt>

	    	<dd>添加会员</dd>

	    	<dd>删除会员</dd>

	    	<dd>查询会员</dd>

    </dl>

    <dl>

    	<dt onclick="list(this)">会员管理</dt>

	    	<dd>添加会员</dd>

	    	<dd>删除会员</dd>

	    	<dd>查询会员</dd>

    </dl>

  </body>

</html>

　　

JS 实现点击展开菜单的更多相关文章

  1. ListView之点击展开菜单

    一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...

  2. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  3. 原生态js单个点击展开收缩

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js按钮点击展开收起

    $('.tab').click(function(){ var index = $('.tab').index(this), //缓存第一次点击的li的索引值 ele = $(this).find(' ...

  5. 实用js+css多级树形展开效果导航菜单

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

  6. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  7. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  8. java Swing 如何添加点击可展开菜单控件( JMenuBar如何使用？）

    准备: JMenuBar  点击可展开控件本体 JMenu 点击可展开控件中的一级菜单 JMenuItem 点击可展开控件中的二级菜单 JFrame 程序运行时弹出的那个框框 这是一个使用点击可展开菜 ...

  9. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

随机推荐

  1. easyui设置界面的高度自适应

    单独设置界面中特定region区时,高度自适应失败:设置整个界面时成功.实现代码在script块中,具体代码如下: <%@ Page Language="C#" AutoEv ...

  2. 《Head First设计模式》

    单件模式: 确保一个类只有一个实例,并提供一个全局访问点. 没有公开的构造函数,而采用一个公开的静态成员函数调用构造函数(使用该静态成员函数调用就是全局访问点,使用它可以在需要时才实例化对象),确保只 ...

  3. Java 流程控制语句

    java的流程控制: 1.顺序结构 2.选择结构 a.关系运算.逻辑运算.条件运算 b.if语句 c.if-else语句.if - else if -else语句 d.switch语句. 3.循环语句 ...

  4. 银行账户管理系统（oracle数据库连接池，数据库的链接，）

    /* * 银行账户管理系统: * 属性:账户id,姓名,金额salary,利息类型: *管理员模块实现的功能: * 1.给用户开户 * 2.查询所有账户信息 * 用户模块实现的功能: * 1.显示用户 ...

  5. hdu4932 Miaomiao's Geometry

    这是一道搜索题,我们很容易得到目标值的上下界,然后就只能枚举了. 就是将x轴上的点排序之后从左到右依次考察每个点,每个点要么在线段的左端点,要么在线段的右端点. 点编号从0到n-1,从编号为1的点开始 ...

  6. A Plug for UNIX 分类： POJ 图论 函数 2015-08-10 14:18 2人阅读 评论(0) 收藏

    A Plug for UNIX Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14786 Accepted: 4994 Desc ...

  7. userdebug版本开机串口log打开

    在/bootable/bootloader/lk/app/mt_boot/mt_boot.c里修改: if (!has_set_p2u) { #ifdef USER_BUILD sprintf(cmd ...

  8. c++のdll两种调用方式

    调用DLL有两种方法:静态调用和动态调用. (一).静态调用其步骤如下: 1.把你的youApp.DLL拷到你目标工程(需调用youApp.DLL的工程)的Debug目录下; 2.把你的youApp. ...

  9. C# Json 转对象

    C# public static UserInfo JsonConvertStringWeiXinInfo(string json) { return (UserInfo)Newtonsoft.Jso ...

  10. Java发送邮件，所遇到的常见需求

    明天要做关于发送邮件的接口,虽然我之前已用Java Mail做过许多关于邮件的发送.但同事说有点难点,虽我还不知难点在哪,还是要复习下.凡事预则立,不预则废嘛~ 所需的包: Java Mail : 目 ...