用JS+CSS實(shí)現(xiàn)折疊式導(dǎo)航菜單，當(dāng)點(diǎn)擊第一菜單后，自動(dòng)打開第二次菜單，如下圖：

style

成都創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，買鏈接，1元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

/*樣式自己補(bǔ)一下*/

.parent?.son{display:?none;}

/style

ul?class="parent"

li?class="pli"

spanphp/span

ul?class="son"

liphp1/li

liphp1/li

/ul

/li

li?class="pli"

spanphp/span

ul?class="son"

liphp1/li

liphp1/li

/ul

/li

li?class="pli"

spanphp/span

ul?class="son"

liphp1/li

liphp1/li

/ul

/li

li?class="pli"

spanphp/span

ul?class="son"

liphp1/li

liphp1/li

/ul

/li

li?class="pli"

spanphp/span

ul?class="son"

liphp1/li

liphp1/li

/ul

/li

/ul

var?pli?=?document.querySelectorAll(".parent?.pli?span");

for(var?i?=?0;ipli.length;i++){

pli[i].index?=?i;

pli[i].onclick?=?function(){

for(var?j?=?0;jpli.length;j++){

document.querySelectorAll(".parent?.pli?.son")[j].style.display="none";

}

this.parentNode.querySelector(".son").style.display="block";

}

}

css四層向下折疊菜單

道理和二級(jí)菜單是一樣的，就是嵌套的層級(jí)多了要注意樣式的書寫！

你實(shí)在用css寫不出來，也可以用jq插件來寫

如何使用純CSS技術(shù)實(shí)現(xiàn)一個(gè)可折疊樹形菜單

利用偽類可以實(shí)現(xiàn)點(diǎn)擊打開折疊菜單，但是再次點(diǎn)擊收起貌似就沒法實(shí)現(xiàn)了。跟樓下說的一樣，利用:hover、:active 可以設(shè)置二級(jí)菜單的樣式（如height、visibility、display）以達(dá)到展開的效果。

網(wǎng)站題目：css折疊菜單樣式,html折疊菜單
URL地址：http://sd-ha.com/article36/dsihcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、Google、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)