純css實現(xiàn)多級折疊菜單折疊樹效果
發(fā)布時間：2018-03-29 16:29:55 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純css實現(xiàn)多級折疊菜單折疊樹效果，運用checkbox的checked值來判斷下級欄目是否展開，通過css3選擇器提供的checked偽類來實現(xiàn)此效果，感興趣的朋友參考下吧
1、運用checkbox的checked值來判斷下級欄目是否展開，CSS3的選擇器中提供了:checked 這個偽類，這個偽類提供我們，當(dāng)元素?fù)碛衏hecked這個值的時候就執(zhí)行你的CSS。
當(dāng)有子菜單時，菜單項右側(cè)有向下的箭頭，當(dāng)收起菜單項時，箭頭朝上。圖片可以自己替換。
2、效果圖
3、代碼片段
<ol class="tree">
<li>
<label for="folder1" class="folderOne">澤元框架</label> <input type="checkbox" id="folder1" />
<ol>
<li>
<label for="subfolder1"class="folderTwo">開發(fā)規(guī)范</label> <input type="checkbox" id="subfolder1" />
<ol>
<li class="file folderThree"><a href="#">常見界面錯誤舉例</a></li>
<li class="file folderThree"><a href="#">關(guān)于發(fā)行報告對BUG管理提出…</a></li>
<li class="file folderThree"><a href="#">插件內(nèi)部JAVA包命名規(guī)范</a></li>
</ol>
</li>
<li class="file folderTwo"><a href="#">概述</a></li>
<li class="file folderTwo"><a href="#">服務(wù)器集群</a></li>
<li class="file folderTwo"><a href="#">模板</a></li>
<li class="file folderTwo"><a href="#">安全機(jī)制</a></li>
</ol>
</li>
<li>
<label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" />
<ol>
<li class="file folderTwo"><a href="#">實時數(shù)據(jù)</a></li>
<li>
<label for="subfolder2" class="folderTwo">實時數(shù)據(jù)</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file folderThree"><a href="#">實時數(shù)據(jù)</a></li>
<li class="file folderThree"><a href="#">實時數(shù)據(jù)</a></li>
<li class="file folderThree"><a href="#">實時數(shù)據(jù)</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="#">實時數(shù)據(jù)</a></li>
<li class="file folderTwo"><a href="#">實時數(shù)據(jù)</a></li>
</ol>
</li>
<li>
<label for="folder4" class="folderOne">ZHTML標(biāo)簽</label> <input type="checkbox" id="folder4"/>
<ol>
<li class="file folderTwo"><a href="#">實時數(shù)據(jù)</a></li>
<li class="file folderTwo"><a href="#">實時數(shù)據(jù)</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="#">實時數(shù)據(jù)</a></li>
<li class="file folderTwo"><a href="#">實時數(shù)據(jù)</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;}
/*所有菜單項設(shè)置統(tǒng)一樣式*/
.tree li {position: relative;list-style: none;}
/*一級菜單加下邊線*/
.tree>li{border-bottom: 1px solid #d9d9d9;}
/*給有子菜單的菜單項添加背景圖標(biāo)*/
.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;}
/*當(dāng)input被選中時，給所有展開的子菜單設(shè)置樣式*/
.tree input:checked + ol {padding-left:14px;height: auto;display: block;}
.tree input:checked + ol > li { height: auto;}
/*末層菜單為A標(biāo)簽，設(shè)置樣式*/
.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(){
//獲取當(dāng)前菜單旁邊input的check狀態(tài)
var isChecked = $(this).next("input[type='checkbox']").is(':checked');
//展開和收齊的不同狀態(tài)下更換右側(cè)小圖標(biāo)
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 菜單折疊
先給大家展示效果圖：
如上，假設(shè)一級菜單是 div，二級菜單是 ul。形如：
<div>業(yè)務(wù)管理<span></span></div> <ul> ... <ul> <div class="collapsed">匯總分析<span></span></</div> <ul> ... <ul> <div class="collapsed">>系統(tǒng)管理<span></span></</div> <ul> ... <ul>
當(dāng)菜單展開時，左邊有一個藍(lán)色的標(biāo)記，右邊是折疊標(biāo)記。
左邊藍(lán)色標(biāo)記自不用表，CSS 設(shè)置 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 了，當(dāng)點擊 div 的時候 toggleClass("collapsed")。
總結(jié)
以上所述是小編給大家介紹的純css實現(xiàn)多級折疊菜單折疊樹效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了CSS多級菜單的實現(xiàn)代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-08