获取节点的两种方式：
    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. Swift String类型常规操作

    去除string 首尾的空格var str = " Hello the world   "let whitespace = NSCharacterSet.whitespaceAnd ...

  2. Linux学习笔记（11）-kill函数

    明天开始学习kill函数的用法. ---------------------------------------------- kill函数可以用来向指定的进程发送一个指定的信号,在我的理解的来看,就 ...

  3. python 面向对象初级篇

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

  4. iOS10以上关于访问权限设置

    记录一下: iOS对用户的安全和隐私的增强,在申请很多私有权限的时候都需要添加描述,但是,在使用Xcode 8之前的Xcode还是使用系统的权限通知框.要想解决这个问题,只需要在info.plist添 ...

  5. 网站banner写法

    css .banner{ width: %; height: 375px; background: url(X.jpg) no-repeat center;} html <div class=& ...

  6. Hololens 硬件细节 Hardware Detail

    微软HoloLens是世界第一款完全无线缆的全息计算机.通过在新方式上赋予用户的全息体验,HoloLens重新定义了个人计算(Personal Computing).为了将3D全息图形固定到你周围的真 ...

  7. FileReader获取文件的base64编码

    <input type="file" id="picFile" /> function readFile() { var obj = documen ...

  8. VB6+Winsock编写的websocket服务端

    早就写好了,看这方面资料比较少,索性贴出来.只是一个DEMO中的,没有做优化,代码比较草.由于没地方上传附件,所以只把一些主要的代码贴出来. 这只是服务端,不过客户端可以反推出来,其实了解了webso ...

  9. Unity3d:UI面板管理整合进ToLua

    本文基于 https://github.com/chiuan/TTUIFramework https://github.com/jarjin/LuaFramework_UGUI 进行的二次开发,Tha ...

  10. bootstrap之HTML模板

    bootstrap之HTML模板 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title ...