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

更新时间：2016年12月10日 08:49:10 作者：AllSight

这篇文章主要介绍了JS实战篇之收缩菜单表单布局的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

获取节点的两种方式：

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>

您可能感兴趣的文章:

uni-app小程序中父组件和子组件传值的实现实例
uniapp父子组件引用传值,和vue的一样,没有小程序那样的麻烦,下面这篇文章主要给大家介绍了关于uni-app小程序中父组件和子组件传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
风吟的小型JavaScirpt库 (FY.JS).
此库非常的迷你压缩之后只有1.54KB.但是却有类似jquery的语法有COOKIE操作还有DOM以及AJAX跟绑定事件函数.
2010-03-03
document.addEventListener使用介绍
这篇文章主要介绍了document.addEventListener，下面有个示例，大家可以参考下
2014-03-03
Promise扫盲贴
这篇文章主要介绍了Promise扫盲贴，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
使用js操作css实现js改变背景图片示例
有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然是可以的。具体的方法看下面的实现代码吧
2014-03-03
JavaScript Array.flat()函数用法解析
这篇文章主要介绍了JavaScript Array.flat()函数用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
OpenLayers3实现鼠标移动显示坐标
这篇文章主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
理解javascript中的回调函数(callback)
这篇文章主要介绍了理解javascript中的回调函数(callback),本文着重于对回调函数概念的理解,需要的朋友可以参考下
2014-09-09
使用coffeescript编写node.js项目的方法汇总
Node.js 基于JavaScript编写应用，JavaScript是我的主要开发语言。CoffeeScript是编译为JavaScript的编程语言。CoffeeScript是一个非常高阶的语言，将JavaScript、Ruby和Python中我最爱的部分结合在了一起。小编给大家介绍下使用coffeescript编写node.js项目的方法
2015-08-08
js实现在文本框光标处添加字符的方法介绍
在开发应用中，经常会遇到一些技术上的问题，比如：怎样让js在文本框光标处添加字符，本文将以此问题进行详细介绍，需要了解的朋友可以参考下
2012-11-11