编程 Javascript

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>

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

- Author -

AllSight

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 类定义的4种方法

Sep 12 Javascript

关于全局变量和局部变量的那些事

Jan 11 Javascript

谷歌浏览器不支持showModalDialog模态对话框的解决方法

Sep 22 Javascript

Jquery EasyUI Datagrid右键菜单实现方法

Dec 30 Javascript

浅谈js停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)

Feb 08 Javascript

走进AngularJs之过滤器（filter）详解

Feb 17 Javascript

详解webpack引入第三方库的方式以及注意事项

Jan 15 Javascript

100行代码实现vue表单校验功能(小白自编)

Nov 19 Javascript

vue和小程序项目中使用iconfont的方法

May 19 Javascript

详解vue-router的导航钩子(导航守卫)

Nov 02 Javascript

解读Vue组件注册方式

May 15 Vue.js

浅谈Web Storage API的使用

Jun 23 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