获取节点的两种方式：
    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. MIT 6.828 JOS学习笔记18. Lab 3.2 Part B: Page Faults, Breakpoints Exceptions, and System Calls

    现在你的操作系统内核已经具备一定的异常处理能力了,在这部分实验中,我们将会进一步完善它,使它能够处理不同类型的中断/异常. Handling Page Fault 缺页中断是一个非常重要的中断,因为我 ...

  2. OX中修改文件名

    右击文件,显示简介,名称与扩展名

  3. mybatis map常用数据类型

    JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String NUMERIC java.math.BigDecimal DECIM ...

  4. 下载aptana插件jar包

    通过eclispe插件市场找到插件地址如下,浏览器打开下载对应包 http://studio-jenkins.appcelerator.org/job/studio3-feature-developm ...

  5. python求数字位数的方法

    第一种:利用str()函数将数字转化成字符串,再利用len()函数判断位长. a=Int(raw_input("the number you want type in:") b=l ...

  6. 建立jackrabbit内容仓库实例

    jackrabbit需要内容仓库主目录和内容仓库配置文件这两部分的信息才能创建一个运行时内容仓库实例. 1.内容仓库主目录结构 2.Repository.xml的配置文件结构

  7. < meta > 元素

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...

  8. 图的基本遍历算法的实现（BFS & DFS）复习

    #include <stdio.h> #define INF 32767 typedef struct MGraph{ ]; ][]; int ver_num, edge_num; }MG ...

  9. 【原】iOS学习之UITabBar的隐藏

    当页面使用 UITabBarController + UINavigationController 框架的时候,当跳转到详情页面的时候,如果 UITabBar 仍然存在的话就会造成逻辑混乱,用户体验也 ...

  10. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...