JS实战篇之收缩菜单表单布局


Posted in Javascript onDecember 10, 2016

获取节点的两种方式:

    1、通过event对象的srcElement属性;

    2、通过事件源对象用this传入。

代码如下:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>收缩菜单 · 表单布局</title>
  <script type="text/javascript">
    function list(dtNode){
      // var dtNode = event.srcElement;
      var dlNode = dtNode.parentNode;
      // alert(dtNode.nodeName+"---"+dlNode.nodeName);
      var dlNodes = document.getElementsByTagName("dl");
      // alert(dlNodes.length);
      for(var i=0; i<dlNodes.length; i++){
        if(dlNodes[i] == dlNode){
          /*判断当前标题是展开还是关闭状态,默认关闭,先执行else语句*/
          if(dlNode.className == "open"){
            dlNode.className = "close";
          }
          else{
            dlNode.className = "open";
          }
        }
        else{
          dlNodes[i].className = "close";
        }
      }
    }
  </script>
  <style type="text/css">
    dl{
      overflow: hidden;
      height: 18px;
    }
    .open{
      overflow: visible;
    }
    .close{
      overflow: hidden;
    }
  </style>
</head>
  <!-- 获取节点的两种方式:
  1、通过event对象的srcElement属性;
  2、通过事件源对象用this传入
 -->
<body>
  <!-- 事件源是dt,但是操作的是dl -->
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
</body>
</html>
Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
react组件基本用法示例小结
Apr 27 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
javascript动画之磁性吸附效果篇
Dec 09 #Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 #Javascript
详解自动生成博客目录案例
Dec 09 #Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 #Javascript
JS判断是否手机或pad访问实现方法
Dec 09 #Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 #Javascript
利用JS实现页面删除并重新排序功能
Dec 09 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vuex 的简单使用
2018/03/22 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
材料采购员岗位职责
2013/12/17 职场文书
人事科岗位职责范本
2014/03/02 职场文书
个人四风对照检查材料
2014/09/26 职场文书
大学生村官个人总结
2015/02/15 职场文书
营运督导岗位职责
2015/04/10 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
2019消防宣传标语!
2019/07/10 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Python中的套接字编程是什么?
2021/06/21 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python