Javascript通过overflow控制列表闭合与展开的方法


Posted in Javascript onMay 15, 2015

本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过overflow控制列表闭合展开</title>
<style type="text/css">
div dl
{
  margin:0;
  padding:0;
  font-size:14px;
}
#divMain
{
  width:500px;
  background-color:#22477A;
  margin:0 auto;
  margin-top:30px;
}
dl
{
  width:200px;
  background:#A6BCE5;
  height:14px; /*和字体大小一样高*/
  overflow:hidden; /*默认溢出隐藏*/
}
dt
{
  cursor:pointer; /*设置手型光标*/
  font-weight:bold;
  color:Green;
}
.open
{
  height:112px;
  overflow:visible;
}
.close
{
  height:14px; /*和字体大小一样高*/
  overflow:hidden;
}
</style>
<script type="text/javascript">
function DisplayList() {
  var dtNode = window.event.srcElement;
  var dlNode = dtNode.parentNode;
  var dlNodes = document.getElementsByTagName("dl");
  for (var i = 0; i < dlNodes.length; i++) {
    if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl
      if (dlNodes[i].className == "open") {
        dlNodes[i].className = "close";
      }
      else {
        dlNodes[i].className = "open";
      }
    }
    else {
      dlNodes[i].className = "close";
    }
  }
}
</script>
</head>
<body>
<div id="divMain">
<dl>
  <dt onclick="DisplayList()">
    球星列表1
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表2
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表3
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表4
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表5
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表6
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JS hashMap实例详解
May 26 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JS随机密码生成算法
Sep 23 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
Javascript节点关系实例分析
May 15 #Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 #Javascript
Javascript进制转换实例分析
May 14 #Javascript
Javascript中For In语句用法实例
May 14 #Javascript
You might like
微信access_token的获取开发示例
2015/04/16 PHP
php实现paypal 授权登录
2015/05/28 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python实现爬取图书封面
2018/07/05 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python路径的写法及目录的获取方式
2019/12/26 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
数控技术与应用毕业生自荐信
2013/09/24 职场文书
中国好声音华少广告词
2014/03/17 职场文书
党员公开承诺书范文
2014/03/25 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
音乐剧猫观后感
2015/06/04 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python