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 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
react 生命周期实例分析
May 18 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
PHP新手上路(三)
2006/10/09 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Php多进程实现代码
2018/05/07 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python类成员继承重写的实现
2020/09/16 Python
Django URL参数Template反向解析
2020/11/24 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
十佳美德少年事迹材料
2014/02/05 职场文书
医院信息公开实施方案
2014/05/09 职场文书
优秀求职信
2014/05/29 职场文书
宣传口号大全
2014/06/16 职场文书
五一口号
2014/06/19 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
会议通知
2015/04/15 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python