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. semantic-ui and IE only message

    <![if !IE]> <div class="ui message red"> <i class="close icon"> ...

  2. Android的init过程（二）：初始化语言（init.rc）解析【转】

    转自:http://www.cnblogs.com/nokiaguy/p/3164799.html Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核: ...

  3. 数字转表格标题 Excel Sheet Column Title

    #include<string>using namespace std;class Solution {public:   string convertToTitle(int n) {  ...

  4. OpenCV学习 物体检测 人脸识别 填充颜色

    介绍 OpenCV是开源计算机视觉和机器学习库.包含成千上万优化过的算法.项目地址:http://opencv.org/about.html.官方文档:http://docs.opencv.org/m ...

  5. iOS开发 爱特开发技术bug总结

    #pragma mark 每天总结学习两小时  效率 和 每天学习 研究底层 多进去看看 // .................................................... ...

  6. MySQL存储引擎中的MyISAM和InnoDB区别详解

    在使用MySQL的过程中对MyISAM和InnoDB这两个概念存在了些疑问,到底两者引擎有何分别一直是存在我心中的疑问.为了解开这个谜题,搜寻了网络,找到了如下信息: MyISAM是MySQL的默认数 ...

  7. recyclview多条目布局

    多条目基础 http://blog.csdn.net/fangchao3652/article/details/43148871 添加底部加载更多 http://blog.csdn.net/fangc ...

  8. sass初步认识1

    sass是一种“css预处理器”,同类的还有less等,方法类似.css预处理器的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的css文件. 使用sass需要先暗转RUBY,再 ...

  9. Python基本概念及零碎知识点

    1.python面向对象 类和对象是面向对象编程的两个主要方面.类创建一个新类型,而对象这个类的实例:这类似于你有一个int类型的变量,这存储整数的变量是int类的实例(对象)把握一点:在python ...

  10. C#相对路径转绝对路径，绝对路径转相对路径

    1.绝对路径转相对路径 绝对转相对似乎C#没有提供实现,需要自己写,这里摘选了一位博友的实现方法: string RelativePath(string absolutePath, string re ...