获取节点的两种方式：
    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. 基于.NET平台常用的框架整理

    自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...

  2. python 面向对象初级篇

    Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...

  3. Maven打包生成可运行bat/sh脚本文件

    利用Maven的appassembler-maven-plugin插件,就可以实现自动打包可运行的脚本,还可以跨平台.   <plugin>      <groupId>org ...

  4. 从业十余年谈谈对dotnet看法与坚持

    前言 园子经常在讨论关于.Net发展的问题,我也这些年在工作乃至创业过程中使用.Net碰到的一些问题和看法.个人擅长的技术面,C/C++/MFC/STL.ASM.JAVA.VB.Javascript/ ...

  5. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  6. mark

    *求数根公式:a的数根b = (a-1) % 9 + 1; *约瑟环问题:f1 = 0; 第i个(i>1),f = (f+m) %i;

  7. pythonchallenge 解谜 Level 2

    好吧,赶紧贴一下. #-*- coding:utf-8 -*- #代码版本均为python 3.5.1 #Level 2 import re file = open("Level 2.txt ...

  8. LabVIEW 吸星大法 - 看见的好东西都是我的(上篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  9. CF2.D

    D. Santa Claus and a Palindrome time limit per test 2 seconds memory limit per test 256 megabytes in ...

  10. java并发编程（十九）障碍器CyclicBarrier

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17512983 CyclicBarrier(又叫障碍器)同样是Java 5中加入的新特性,使 ...