原生js實現二級伸縮選單

2022-03-07 14:50:33 字數 2563 閱讀 9492

看似簡單的小功能,坑卻不少...主要為了練習一下自己的js實踐能力,真是不寫不知道,這麼小小的乙個東西我遇到的坑實在是太多了,放上來僅供參考學習..優化什麼的都不好....

效果如圖所示:

**如下:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>qq列表

title

>

<

style

>

#list

ul, li, h2

#list ul

.item li

h2h2.active

.item .current

style

>

head

>

<

body

>

<

ul id

="list"

>

<

li>

<

h2>小學弟們

h2>

<

ul class

="item"

>

<

li>陳思遠

li>

<

li>胡嘉怡

li>

<

li>黃子恆

li>

<

li>劉丹

li>

<

li>南極翁

li>

<

li>馬鵬飛

li>

<

li>麻怡若

li>

ul>

li>

<

li>

<

h2>我的好友

h2>

<

ul class

="item"

>

<

li>程曦

li>

<

li>付柳元

li>

<

li>黃環

li>

<

li>劉巧麗

li>

<

li>餘萌

li>

<

li>沈潤

li>

<

li>徐婷

li>

ul>

li>

<

li>

<

h2>大學同學

h2>

<

ul class

="item"

>

<

li>蔡中勇

li>

<

li>丁玉成

li>

<

li>陳欣欣

li>

<

li>楊帥

li>

<

li>杜同舟

li>

<

li>李丹丹

li>

<

li>李濟雨

li>

ul>

li>

<

li>

<

h2>高中同學

h2>

<

ul class

="item"

>

<

li>方祥

li>

<

li>胡曉歡

li>

<

li>李連松

li>

<

li>劉一澤

li>

<

li>羅勇

li>

<

li>毛蒙

li>

<

li>衛齊

li>

ul>

li>

ul>

body

>

<

script

>

window.onload

=function

()else

else}}

}}//為每個li加上點選事件

varliarr =;

for(

varj=0

,aullen

=aul.length;j

<

aullen;j++)

}if(

this

.classname

==''

)else}}

}//alert(liarr.length);

}script

>

html

>

原生js實現二級聯動下拉列表選單

二級聯動下拉列表選單的難點在於對後台返回的資料進行解析,不多逼逼,直接上 上圖是後台返回的資料 實現 如下 var devicenotexist true 防止資料重複 if data.code 0 tim j push period break if devicenotexist dev.push...

二級選單聯動js

script src city.js script 建立文件片段,使用完後釋放 var flag document.createdocumentfragment 建立城市下拉框 var select document.createelement select 給城市下拉框乙個id select.id...

css 實現動態二級選單

動態實現簡單的二級選單 當滑鼠放到一級標籤上時,滑鼠會變成小手的形狀 展示二級選單,原始碼如下,複製即可直接使用 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 meta name viewport content width ...