當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/9/27 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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实战篇之收缩菜单表单布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。