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获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
vue实现购物车小案例
Sep 27 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python传递参数方式小结
2015/04/17 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
组织关系转移介绍信
2014/01/16 职场文书
创业计划书模版
2014/02/05 职场文书
商业房地产广告语
2014/03/13 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
大学生在校表现评语
2014/12/31 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python