zoukankan      html  css  js  c++  java
  • JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:
        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>
  • 相关阅读:
    UI控件DevExpress ASP.NET Bootstrap Controls v20.1全新升级,Accordion、GridView控件新功能更便捷!
    Web报表设计器如何使用自定义序列化程序类?DevExpress轻松搞定!
    Web界面开发工具——看Kendo UI如何实现网格最佳性能
    WPF界面解决方案首选工具,DevExpress一招搞定使用DXGrid和eXpress持久对象实现CRUD操作
    2020年界面开发有哪些新动态?Data Grid和Tree List控件使用者福音来啦!
    完整UI库Kendo UI R3 2020震撼发布|附高速下载链接
    jQuery组件库——Kendo UI轻松实现网格全球化
    PHP 开发API接口签名生成以及验证
    Nginx 配置默认读取index.php文件并设置TP路由
    PHP 借助PHPExcel做订单导出
  • 原文地址:https://www.cnblogs.com/panweiwei/p/6154816.html
Copyright © 2011-2022 走看看