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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
React中的Context应用场景分析
Jun 11 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
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php批量删除操作代码分享
2017/02/26 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
Python绘制3D图形
2018/05/03 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
高三学生评语大全
2014/04/25 职场文书
集体生日活动方案
2014/08/18 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
签约仪式致辞
2015/07/30 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
python开发制作好看的时钟效果
2022/05/02 Python