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. Linux下创建与解压tar, tar.gz和tar.bz2文件及压缩率对比 | 沉思小屋

    刚 在qq群里面一位仁兄问到文件压缩的命令,平时工作中大多用解压缩命令,要是遇到压缩就现查(这不是一个好习惯),于是整理下Linux下创建与解压 zip.tar.tar.gz和tar.bz2文件及他们 ...

  2. source insight项目文件列表固定嵌入右侧

    项目文件列表悬浮出来,不是嵌入紧靠右边,先将该窗口最小化,然后往右拖放,就成功固定嵌入到右边了.

  3. 原来样式改变不了（input type="file"）

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  4. java 1G大文件复制

    对比几种复制方法 复制的文件是980m的txt文件 1.  FileChannel 方法 代码: public static void mappedBuffer() throws IOExceptio ...

  5. Unity Adam特性整理

    1.Wind 小工具,一个绘制箭头Gizmos的脚本 2.TubeLight柱形光照 蛮NB的技术,实现动态柱状光照,但相机必须挂上PostProcessing 默认场景拖出来之后是这样的,然后给相机 ...

  6. 【转】写一个标准宏MIN，这个宏输入两个参数并返回较小的那个。另外当写下least=MIN(*p++,b)时会发生什么

    解答:#define MIN(A,B) ((A) <= (B) ? (A) : (B)) MIN(*p++, b)会产生宏副作用 剖析:这个面试题主要考察宏定义可以实现函数的功能.但是它终归不是 ...

  7. shell脚本常见错误

    一.引言 想要学习使用shell脚本,却在开始的时候遇到很多不顺利,都是一些小细节的东西,所以在此记录一下. 二.各种细节问题 1.变量作为赋值对象时不需要添加$,取值时需要,也就是说,这个$就是取值 ...

  8. 四、java中的数组

    总结: 数组的特点: 1.存储的数据类型单一. 2.数组的大小不可变. 3.Arrays工具类.

  9. SqlSever基础 delete 删除一个表中的所有数据

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  10. [转]Unity 脚本生命周期流程图

    渲染 OnPreCull: 在相机剔除场景之前调用此函数.相机可见的对象取决于剔除.OnPreCull 函数调用发生在剔除之前. OnBecameVisible/OnBecameInvisible:  ...