使用js簡單實(shí)現(xiàn)了tree樹菜單
更新時(shí)間:2013年11月20日 15:37:58 投稿:whsnow
使用js簡單實(shí)現(xiàn)了樹菜單!具體實(shí)現(xiàn)實(shí)例代碼如下,相信自己你一定可以實(shí)現(xiàn)的更好
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tree</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.node ul{
margin-left:20px;
}
.node .node{
display:none;
}
.node .tree{
height:24px;
line-height:24px;
}
.ce_ceng_close{
background:url(images/cd_zd1.png) left center no-repeat;
padding-left: 15px;
}
.ce_ceng_open{
background:url(images/cd_zd.png) left center no-repeat;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="cd_zj_l">
<div class="cd_title">目錄導(dǎo)航</div>
<div class="cv_fcv node">
<div style="clear:both"></div>
</ul>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".tree").each(function(index, element) {
if($(this).next(".node").length>0){
$(this).addClass("ce_ceng_close");
}
});
$(".tree").click(function(e){
var ul = $(this).next(".node");
if(ul.css("display")=="none"){
ul.slideDown();
$(this).addClass("ce_ceng_open");
ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
}else{
ul.slideUp();
$(this).removeClass("ce_ceng_open");
ul.find(".node").slideUp();
ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
}
});
</script>
</body>
</html>
使用js簡單實(shí)現(xiàn)了樹菜單!相信自己你一定可以實(shí)現(xiàn)的更好
相關(guān)文章
Javascript ES6中對象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07javascript 模式設(shè)計(jì)之工廠模式詳細(xì)說明
2010-05-05jquery實(shí)現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動
這篇文章主要介紹了jquery實(shí)現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動,需要的朋友可以參考下2014-03-03用js實(shí)現(xiàn)每隔一秒刷新時(shí)間的實(shí)例(含年月日時(shí)分秒)
下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)每隔一秒刷新時(shí)間的實(shí)例(含年月日時(shí)分秒)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)“全選”和"全不選"功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript實(shí)現(xiàn)按照指定長度為數(shù)字前面補(bǔ)零輸出的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)按照指定長度為數(shù)字前面補(bǔ)零輸出的方法,實(shí)例分析了javascript操作數(shù)字補(bǔ)零的技巧,需要的朋友可以參考下2015-03-03