当前位置：首页 > 前端技术 > javascript >内容正文

javascript

html多级折叠菜单表单,JS实战篇之收缩菜单表单布局

发布时间：2024/9/27 javascript 45 豆豆

生活随笔收集整理的这篇文章主要介绍了 html多级折叠菜单表单,JS实战篇之收缩菜单表单布局小编觉得挺不错的,现在分享给大家,帮大家做个参考.

获取节点的两种方式：

1、通过event对象的srcElement属性；

2、通过事件源对象用this传入。

代码如下：

收缩菜单 · 表单布局

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

if(dlNodes[i] == dlNode){

/*判断当前标题是展开还是关闭状态，默认关闭，先执行else语句*/

if(dlNode.className == "open"){

dlNode.className = "close";

}

else{

dlNode.className = "open";

}

else{

dlNodes[i].className = "close";

}

dl{

overflow: hidden;

height: 18px;

}

.open{

overflow: visible;

}

.close{

overflow: hidden;

}

今天天气好晴朗

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

以上是生活随笔为你收集整理的html多级折叠菜单表单,JS实战篇之收缩菜单表单布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。