获取节点的两种方式：
    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实战 ·  收缩菜单表单布局的更多相关文章

  1. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  2. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  3. DIV的表单布局

    表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  5. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  6. js实现收缩菜单效果

    废话不多说,直接上代码: 有注释 <head> <title></title> <style type="text/css"> di ...

  7. 基于表单布局：分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  8. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  9. Qt之表单布局（QFormLayout）

    简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:Q ...

随机推荐

  1. 安装Impala

    1.默认安装好hadoop并且能正常启动(只需hdfs即可)2.安装如下rpm包(需要root权限 注意顺序) bigtop-utils-0.7.0+cdh5.8.2+0-1.cdh5.8.2.p0. ...

  2. java 对List进行物理分页

    /* * To change this template, choose Tools | Templates * and open the template in the editor. */ pac ...

  3. Javascript-DOM总结

    DOM总结 1.DOM的含义     DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的 ...

  4. UGUI全面实践教程

    UGUI全面实践教程   试读文档下载地址:http://pan.baidu.com/s/1hq3UYGk 介绍:UGUI是Unity官方推出的最新UI系统.本教程为国内唯一的UGUI专向资料.本教程 ...

  5. centos 6.5 yum安装 mysql 5.6

    1. 查看系统里面有没有mysql 的repo   yum repolist all | grep mysql 2. 如果没有发现,则需要配置repo 注意,如果要使用5.7 或者其他任何版本,只能有 ...

  6. Java_新浪微博SDK_jar包下载

    新浪微博开放平台API_jar包下载地址:jar包(猛戳) --by HsuChan

  7. linux 下使用配置文件

    最近鼓捣双机热备,写了些shell脚本 适用配置文件 以 ifbeat 为例,linux的标准的配置文件中等号两遍不能存在括号, 空格 或特殊符号可以用转衣服 ' \' beat=true prima ...

  8. Linux Shell中单引号、双引号、反引号的区别【转载】

    linux shell可以识别4种不同类型的引字符号: 单引号字符' 双引号字符" 反斜杠字符\ 反引号字符` 1. 单引号 ( '' )# grep Susan phonebook Sus ...

  9. PHP：函数赋参数默认初值

    函数的默认参数 允许定义函数时,指定参数的默认值,如: function js_location($url, $alert='', $top=''){ if($alert=='' && ...

  10. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...