JS 实现点击展开菜单

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 实现点击展开菜单的更多相关文章

ListView之点击展开菜单
一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...
vue.js 实现点击展开收起动画
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...
原生态js单个点击展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js按钮点击展开收起
$('.tab').click(function(){ var index = $('.tab').index(this), //缓存第一次点击的li的索引值 ele = $(this).find(' ...
实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery实现点击展开列表同时隐藏其他列表 js 对象操作对象原型操作把一个对象A赋值给另一个对象B 并且对象B 修改不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jquery实现点击 ...
Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...
java Swing 如何添加点击可展开菜单控件( JMenuBar如何使用？）
准备: JMenuBar 点击可展开控件本体 JMenu 点击可展开控件中的一级菜单 JMenuItem 点击可展开控件中的二级菜单 JFrame 程序运行时弹出的那个框框这是一个使用点击可展开菜 ...
重写JS的鼠标右键点击菜单
重写JS的鼠标右键点击菜单该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

随机推荐

正确配置Linux系统ulimit值的方法【转】
转自:http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html 在Linux下面部署应用的时候,有时候会遇上Socket/File ...
Pro ASP.NET MVC 5 Framework.学习笔记.6.3.MVC的必备工具
每个MVC程序员的军火库中,都有这三个工具:一个依赖注入(DI)容器,一个单元测试框架,一个模拟工具. 1.准备一个示例项目创建一个ASP.NET MVC Web Application的Empty ...
Python精神
[root@LDAP_slave ~]# python -c "import this" The Zen of Python, by Tim Peters Beautiful is ...
Java JDBC 驱动 MySQL
MySQL: 1>下载地址:http://www.mysql.com/products/connector/ 2> //jdbc:[数据库类型]://[ip地址]:[端口号]/[数据库名] ...
发送xml报文去第三方请求获取xml报文数据
import java.io.*; import java.net.HttpURLConnection; import java.net.MalformedURLException; import j ...
python day5--正则表达式
#----正则表达式 import re elink = '<a href="(.*)">(.*)</a>' info = '<a href=&quo ...
rtc关机闹钟4 AlarmManagerService.java
vim base/services/core/java/com/android/server/AlarmManagerService.java AlarmManager 调用 IAlarmManage ...
ZOJ 3860: - Find the Spy
3860 - Find the Spy Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu S ...
Unity Shader中自定义枚举类型
效果脚本: Properties { _MainTex ("Texture", 2D) = "white" {} [Enum(Enum1,,Enum2,)]_ ...
Poj(2367)，拓扑排序
题目链接:http://poj.org/problem?id=2367 题意: 知道一个数n, 然后n行,编号1到n, 每行输入几个数,该行的编号排在这几个数前面,输出一种符合要求的编号名次排序. 拓 ...

JS 实现点击展开菜单

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

随机推荐

热门专题