1、運用checkbox的checked值來判斷下級欄目是否展開，CSS3的選擇器中提供了:checked 這個偽類，這個偽類提供我們，當元素擁有checked這個值的時候就執行你的CSS。
當有子菜單時，菜單項右側有向下的箭頭，當收起菜單項時，箭頭朝上。圖片可以自己替換。
2、效果圖
3、代碼片段
<ol class="tree"> <li> <label for="folder1" class="folderOne">澤元框架</label> <input type="checkbox" id="folder1" /> <ol> <li> <label for="subfolder1"class="folderTwo">開發規范</label> <input type="checkbox" id="subfolder1" /> <ol> <li class="file folderThree"><a href="#">常見界面錯誤舉例</a></li> <li class="file folderThree"><a href="#">關于發行報告對BUG管理提出…</a></li> <li class="file folderThree"><a href="#">插件內部JAVA包命名規范</a></li> </ol> </li> <li class="file folderTwo"><a href="#">概述</a></li> <li class="file folderTwo"><a href="#">服務器集群</a></li> <li class="file folderTwo"><a href="#">模板</a></li> <li class="file folderTwo"><a href="#">安全機制</a></li> </ol> </li> <li> <label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" /> <ol> <li class="file folderTwo"><a href="#">實時數據</a></li> <li> <label for="subfolder2" class="folderTwo">實時數據</label> <input type="checkbox" id="subfolder2" /> <ol> <li class="file folderThree"><a href="#">實時數據</a></li> <li class="file folderThree"><a href="#">實時數據</a></li> <li class="file folderThree"><a href="#">實時數據</a></li> </ol> </li> </ol> </li> <li> <label for="folder3" class="folderOne">ZAS</label> <input type="checkbox" id="folder3" /> <ol> <li class="file folderTwo"><a href="#">實時數據</a></li> <li class="file folderTwo"><a href="#">實時數據</a></li> </ol> </li> <li> <label for="folder4" class="folderOne">ZHTML標簽</label> <input type="checkbox" id="folder4"/> <ol> <li class="file folderTwo"><a href="#">實時數據</a></li> <li class="file folderTwo"><a href="#">實時數據</a></li> </ol> </li> <li> <label for="folder5" class="folderOne">UI框架API手冊</label> <input type="checkbox" id="folder5"/> <ol> <li class="file folderTwo"><a href="#">實時數據</a></li> <li class="file folderTwo"><a href="#">實時數據</a></li> </ol> </li> </ol><style type="text/css"> .tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;} /*隱藏input*/ .tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;} /*所有菜單項設置統一樣式*/ .tree li {position: relative;list-style: none;} /*一級菜單加下邊線*/ .tree>li{border-bottom: 1px solid #d9d9d9;} /*給有子菜單的菜單項添加背景圖標*/ .tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; } .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;} /*清除所有展開的子菜單的display*/ .tree li input + ol{display: none;} /*當input被選中時，給所有展開的子菜單設置樣式*/ .tree input:checked + ol {padding-left:14px;height: auto;display: block;} .tree input:checked + ol > li { height: auto;} /*末層菜單為A標簽，設置樣式*/ .tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;} .tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;} /*不同層級的菜單字體大小不同*/ .tree .folderOne{font-size: 18px;} .tree .folderTwo{font-size:16px;} .tree .folderThree{font-size:14px;}</style><script type="text/javascript"> $(document).ready(function() { //每個有子菜單的菜單項添加點擊事件 $(".tree label").click(function(){ //獲取當前菜單旁邊input的check狀態 var isChecked = $(this).next("input[type='checkbox']").is(':checked'); //展開和收齊的不同狀態下更換右側小圖標 if(isChecked){ $(this).css( "background-image","url(../images/cp-detail-arrow-b.png)" ); }else{ $(this).css( "background-image","url(../images/cp-detail-arrow-t.png)" ); } }); }); </script>下面介紹下CSS 菜單折疊
先給大家展示效果圖：
如上，假設一級菜單是 div，二級菜單是 ul。形如：
<div>業務管理<span></span></div><ul>...<ul><div class="collapsed">匯總分析<span></span></</div><ul>...<ul><div class="collapsed">>系統管理<span></span></</div><ul>...<ul>
當菜單展開時，左邊有一個藍色的標記，右邊是折疊標記。
左邊藍色標記自不用表，CSS 設置 border 即可，右邊利用 CSS 也超方便。
div span { float:right; padding-right:20px; }div span:after { content: "∨" }div.collapsed span:after { content: "∧" }然后再說子菜單的折疊效果，有動畫噢：
div.collapsed + ul { height: 0px; transition: height 0.5s ease-out; }div ul { height: 80px; transition: height 0.5s ease-in; }注意 ul 一定要有 height 的具體值，如果沒有具體指明多少 px，則雖然能折疊，但是沒有動畫效果。
最后就是利用 jQuery 或 ezj 切換 className 了，當點擊 div 的時候 toggleClass("collapsed")。
總結
以上所述是小編給大家介紹的純css實現多級折疊菜單折疊樹效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
