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 ...
随机推荐
- git 用法
git init #创建仓库git add _filename #添加文件到缓冲区git commit -m "msg" #提交更新,从缓冲区提交到版本库git status #查 ...
- 【原创】JDK动态代理，此次之后，永生难忘。
动态代理,这个词在Java的世界里面经常被提起,尤其是对于部分(这里强调“部分”二字,因为有做了一两年就成大神的,实力强的令人发指,这类人无疑是非常懂动态代理这点小伎俩的)做了一两年新人来说,总是摸不 ...
- Oracle 11gR2新建空表不分配Segment
一.引言: 在看<收获,不止Oracle>的神奇,走进逻辑体系世界一章时,需要新建一张表查看Extents的情况,由于该书的环境是ORACLE10G的,因此新建空表以后立刻就分配Segme ...
- Redis的使用完整版
[Redis基本] 1.redis安装完成后的几个文件: redis-benchmark 性能测试工具(批量写入)./bin/redis-benchmark -n 10000 即可一次性写入100 ...
- 在PostgreSQL中使用oracle_fdw访问Oracle
本文讲述如何在PostgreSQL中使用oracle_fdw访问Oracle上的数据. 1. 安装oracle_fdw 可以参照:oracle_fdw in github 编译安装oracle_fdw ...
- android 动画总结
以下博文讲解比较详细,可查阅: http://www.360doc.com/content/13/0102/22/6541311_257754535.shtml 几个关键属性: setRepeatCo ...
- js编程-面相对象
//js面相对象编程 //定义constructor构造方法 function myFn(name,sex){ this.name = name; this.sex = sex; } //用proto ...
- jquery 判断checkbox是否为空的三种方法
//方法一: if ($("#checkbox-id")get(0).checked) { // do something } //方法二:也适用于单选按钮 if($('#chec ...
- hdu1074 Doing Homework
这题比较有意思,暴力搜索必然tle,可以用状态压缩dp解决. 我们先不考虑完成所有作业的扣分,而考虑其一个子集的情况. 假设我们得到了完成某子集S对应的作业最少扣分,我们试着向该子集中增加一个元素a, ...
- C++的try_catch异常
http://blog.sina.com.cn/s/blog_a9303fd901018ost.html 大部分内容转自:http://blog.csdn.net/codestinity/articl ...