當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2024/9/27 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 html多级折叠菜单表单,JS实战篇之收缩菜单表单布局小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

獲取節(jié)點(diǎn)的兩種方式：

1、通過(guò)event對(duì)象的srcElement屬性；

2、通過(guò)事件源對(duì)象用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){

/*判斷當(dāng)前標(biāo)題是展開(kāi)還是關(guān)閉狀態(tài)，默認(rèn)關(guān)閉，先執(zhí)行else語(yǔ)句*/

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;

}

今天天氣好晴朗

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

以上是生活随笔為你收集整理的html多级折叠菜单表单,JS实战篇之收缩菜单表单布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。