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. 理解逐次逼近寄存器型ADC：与其它类型ADC的架构对比【转】

    转自:http://bbs.dzsc.com/space/viewspacepost.aspx?postid=86760 摘要:逐次逼近寄存器型(SAR)模数转换器(ADC)占据着大部分的中等至高分辨 ...

  2. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  3. bin和sbin的区别

    bin和sbin的区别: bin:用户命令(所有用户均可使用) sbin:管理命令(通常只有管理员可以使用)

  4. DockerUI安装、使用

    虽然大多数开发人员和管理人员通过命令行来创建及运行Docker容器,但Docker的Remote API让他们可以通过充分利用REST(代表性状态传输协议)的API,运行相同的命令.这时,Docker ...

  5. 学习JS中的小问题

    1.如果载入的2个js文件中有重名函数,那么调用的时候怎么分别调? 第二个文件载入无效. 2.checkbox jQuery对象的checked属性在选中时为checked,否则为undefined: ...

  6. shell脚本判断文件类型

    转自:http://www.cnblogs.com/sunyubo/archive/2011/10/17/2282047.html 1. shell判断文件,目录是否存在或者具有权限 2. #!/bi ...

  7. spring Aop中aop:advisor 与 aop:aspect的区别

    转载:http://blog.csdn.net/u011710466/article/details/52888277 在spring的配置中,会用到这两个标签.那么他们的区别是什么呢?       ...

  8. 灰色预测模型 c# 算法实现

     public class GrayModel    {        private double a0, a1, a2;        private int size;        priva ...

  9. 静态方法和类成员方法（Python）

    静态方法和成员方法分别在创建时分别被装入Staticmethod 类型和 Classmethod类型的对象中.静态方法的定义没有 self参数,且能够被类本身直接调用,类方法在定义时需要名为 cls的 ...

  10. C#获取当前页面的url

    C#获取当前页面的url string a= Request.ApplicationPath; // / string b = Request.CurrentExecutionFilePath; // ...