JS实战 ·  收缩菜单表单布局

最新推荐文章于 2022-10-19 14:49:17 发布
最新推荐文章于 2022-10-19 14:49:17 发布
阅读量184 收藏
点赞数
文章标签： 前端 javascript ViewUI
 获取节点的两种方式：
    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 οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
    <dl>
        <dt οnclick="list(this)">今天天气好晴朗</dt>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
        <dd>今天天气好晴朗</dd>
    </dl>
</body>
</html>
weixin_34265814
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript表格内容的展开和折叠
啊哈前端的专栏
01-08 5559
表格内容的展开和折叠 h2,h5,#tooltipMsg,p { white-space: nowrap; } td { border: 1px solid #ccc; height: 50px; text-align: center;
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
最新发布
请叫我欧皇！的博客
06-28 5403
toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（第一个参数为 true 则展开）文章到此结束，希望对你有所帮助~使用递归的方式进行展开折叠操作。
html多级折叠菜单表单,JS实战篇之收缩菜单表单布局
weixin_29363791的博客
06-03 808
获取节点的两种方式：1、通过event对象的srcElement属性；2、通过事件源对象用this传入。代码如下：收缩菜单 · 表单布局function list(dtNode){// var dtNode = event.srcElement;var dlNode = dtNode.parentNode;// alert(dtNode.nodeName+"---"+dlNode.nodeName...
vue树形折叠表单面板，多级递归级联小组件
10-19 1113
效果展示：支持折叠和多级折叠。
创建可折叠的表单区段
xiantouxu的博客
08-19 1082
表单的折叠与展开切换
HTML5+CSS3折叠动画登录表单效果源码
09-02
这款登录表单的用户名和密码是分开输入的，当输入用户名，然后按回车时，即会折叠展开密码输入框，这个3D折叠的效果很不错。具有比较强烈的3D动感效果。
JS实战篇之收缩菜单表单布局
11-29
在JavaScript实战中，创建一个收缩菜单表单布局是一项常见的任务，尤其在网页交互设计中。这个实例主要展示了如何利用JavaScript动态地控制HTML元素的显示与隐藏，实现菜单的展开和收缩效果。以下是对该实例中涉及...
BootStrap智能表单实战系列(四)表单布局介绍
11-22
在本文中，我们将深入探讨Bootstrap智能表单的实战应用，特别是关于表单布局的方面。Bootstrap，作为一款广泛使用的前端框架，它简化了Web应用程序和网站的开发过程，利用HTML、CSS和JavaScript来构建响应式设计和...
Ext 表单布局实例代码
09-06
在EXT JS这个强大的JavaScript框架中，表单布局是构建用户界面时一个非常重要的组成部分。EXT JS提供了多种布局方式，使得开发者可以灵活地设计和组织表单元素。在提供的代码实例中，我们看到了一个基于EXT JS的表单...
javascript 实现table展开折叠
热门推荐
东语的专栏
10-24 2万+
本文是通过JavaScript实现table下的内容展开、折叠。
一个表单设计器前端代码
08-29
一个表单设计器前端代码只用来学习用。学习点：拖拉、页签等
js左右伸缩分栏 类似百度地图布局分栏效果
08-03
js左右分栏效果，并加载有地图，点击伸缩按钮，实现类似百度地图分栏效果，希望对你有帮助
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
html5折叠表格
10-25
html5折叠表格
layui点击可以伸缩的数据表格实例(表格行伸缩)
06-18 3353
layui制作可以伸缩的数据表格； 具体表现为以下 效果图： 以下提供js代码与json代码 js代码： 以下代码为自动渲染表格；需要注意的是tree属性和col属性 tree: tree中的idName和pidName分别对应json数据中的本身唯一id和父级唯一id; col: col中需要注意嵌套的对象和数组以及模板 ；下面的示例演示了layui特性的一些用法；大家可以根据项目实际情况来选择 // 渲染表格 var insTb = treeTable.render({
html可收缩展开的表单,【HTML】可以收缩和和伸展的表格
weixin_36204992的博客
05-31 590
www.webjx.com function tablecollapse() { /* Variables */ var collapseClass='footcollapse'; var collapsePic='http://webdesign.bitscn.com/UploadFiles_8014/200706/20070620173213376.gif'; va...
html 利用jquery表格可以收缩展开的样式
No_bug_is_possible的博客
04-13 6978
先看下效果废话不多说 直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-s
常见js效果——在表格中收起展开
gmz1992731的博客
07-12 4166
首先我先描述一下html代码，看一下各个元素之间的关系 table> 1 程序数据任意备份 有风险
HTML表单与JavaScript跳转菜单详解
表单设计时需考虑用户体验，确保元素布局清晰，提示信息明确，同时应考虑错误处理和数据验证，以防止无效或恶意输入。例如，可以使用JavaScript进行客户端验证，快速检查用户输入是否符合要求，减少服务器负载。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值