折疊多級菜單的實現(xiàn)方法

wangbjun 發(fā)布于2019-08-19 18:25 / 1035人閱讀

摘要：對于在網(wǎng)頁上展示的課本目錄這樣的多級菜單，想要實現(xiàn)完整顯示某一章的目錄，其它章只顯示章名的效果，最開始用的是作為關(guān)鍵字搜索，但是找到的語句并沒有效果。注各章標簽的類名為，需完整顯示的那一章的類名為。

對于在網(wǎng)頁上展示的課本目錄這樣的多級菜單，想要實現(xiàn)“完整顯示某一章的目錄，其它章只顯示章名”的效果，最開始用的是 "hide all child elements but first" 作為關(guān)鍵字搜索，但是找到的語句 $(".unfocused").not(":first-child").hide(); 并沒有效果。第二天早上再看這段代碼的時候，決定逐語句測試，發(fā)現(xiàn)最開始的 $(".unfocused") 語句得到的是一個 Object 數(shù)組，這樣直接隱藏第一個子節(jié)點之后的子節(jié)點的話，會把其余各章的章標題都隱藏掉。（注：各章 div 標簽的類名為 unfocused，需完整顯示的那一章的類名為 focused。）

后來想到可以用 each() 方法來隱藏每一章的非首個子節(jié)點，但是該方法后面需要跟匿名函數(shù)，這時在 StackOverflow 上看到了一個通過 CSS 后代選擇器來選擇子節(jié)點的方法，忽然想到自己可以用父節(jié)點的類名加上子元素選擇器來隱藏各章的非首個子節(jié)點，$(".unfocused > div:not(:first-child)").hide()，一行語句就搞定了，so good！

不過最后在網(wǎng)頁源碼中測試的時候，發(fā)現(xiàn)語句又沒有生效，檢查了一下代碼，原來是語句沒有寫完整，下面的語句中，最后一行的圓括號和分號都給漏掉了，真是粗心……

云服務(wù)器 GPU云服務(wù)器多級關(guān)聯(lián)菜單多級網(wǎng)頁菜單多級下拉菜單多級菜單下拉列表

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79578.html

相關(guān)文章

原生js練習(xí)題---第六課

摘要：自定義多級右鍵菜單實現(xiàn)效果自定義多級右鍵菜單第五課第六題中已經(jīng)通過事件實現(xiàn)了一級右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽實現(xiàn)效果：6-01完美拖動這里沒有使用h5的拖動，畢竟原題也是考察借助鼠標事件實現(xiàn)自定義的拖動，所以就借鑒了《js高級程序設(shè)計》里的自定義拖動自己封裝了個拖動api，當(dāng)然由于做這個系列題目使用的都是es5的語法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 評論0 收藏0
js遞歸,無限分級樹形折疊菜單

摘要：效果圖表結(jié)構(gòu)形式數(shù)據(jù)數(shù)據(jù)第一級是第二級是廣東第二級是廣西第三級是玉林第三級是北流廣東廣州天河白云廣西玉林北流深圳東莞松山湖部分獲取省一級遞歸結(jié)構(gòu)形式數(shù)據(jù)數(shù)據(jù)廣東廣州天河白云深圳東莞松山湖廣西玉林北流部分獲取省一級遞歸兩者區(qū)別數(shù)據(jù)表形式數(shù)據(jù)遞效果圖 showImg(https://segmentfault.com/img/bVbi519?w=883&h=437); mysql表結(jié)構(gòu)形式...

HitenDev 2019-08-23 12:47 評論0 收藏0
前端開發(fā)文檔

摘要：最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。地址：前端開發(fā)文檔全棧開發(fā) HTML5/CSS3 HTML元素語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南彈性圖...

JerryC 2019-08-22 17:04 評論0 收藏0
前端開發(fā)文檔

摘要：最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。地址：前端開發(fā)文檔全棧開發(fā) HTML5/CSS3 HTML元素語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南彈性圖...

binta 2019-08-29 15:21 評論0 收藏0
前端開發(fā)文檔

摘要：最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。最近在整理全棧開發(fā)方面的技術(shù)細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。地址：前端開發(fā)文檔全棧開發(fā) HTML5/CSS3 HTML元素語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南彈性圖...

Yi_Zhi_Yu 2019-08-02 10:23 評論0 收藏0