使用js簡(jiǎn)單實(shí)現(xiàn)了tree樹(shù)菜單
更新時(shí)間：2013年11月20日 15:37:58 投稿：whsnow
使用js簡(jiǎn)單實(shí)現(xiàn)了樹(shù)菜單！具體實(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簡(jiǎn)單實(shí)現(xiàn)了樹(shù)菜單！相信自己你一定可以實(shí)現(xiàn)的更好
相關(guān)文章
JS實(shí)現(xiàn)簡(jiǎn)易圖片自動(dòng)輪播
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易圖片自動(dòng)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,滑動(dòng)拼圖驗(yàn)證功能是一種常見(jiàn)的網(wǎng)站人機(jī)驗(yàn)證方法,旨在防止惡意機(jī)器人或自動(dòng)化程序?qū)W(wǎng)站進(jìn)行惡意攻擊,需要的朋友可以參考下2024-06-06
js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組元素遍歷與頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
JS代碼隨機(jī)生成姓名、手機(jī)號(hào)、身份證號(hào)、銀行卡號(hào)
下面小編自己寫(xiě)的一個(gè)js生成器代碼，代碼比較簡(jiǎn)單，實(shí)用性非常高，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
這篇文章主要介紹了前端JS經(jīng)典問(wèn)題之跨域的解決方案,文中主要講了瀏覽器的同源策略、跨域限制以及解決跨域的幾種方法,包括CORS、JSONP和配置代理等,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了前端跨域的幾種解決方式，詳細(xì)介紹了同源策略并同時(shí)給出了跨域的五種解決方案，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要介紹了詳解如何使用webpack打包JS，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能
通過(guò)點(diǎn)擊預(yù)約按鈕即可生成二維碼憑碼入校參觀,下面小編通過(guò)實(shí)例代碼講解微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能,感興趣的朋友跟隨小編一起看看吧2024-04-04
用正則表達(dá)式 動(dòng)態(tài)創(chuàng)建/增加css style script 兼容IE firefox
動(dòng)態(tài)創(chuàng)建/增加css style script 用正則表達(dá)式 兼容IE firefox2009-03-03
js 父窗口控制子窗口的行為-打開(kāi)，關(guān)閉，重定位，回復(fù)
技術(shù)要點(diǎn)可以利用windows的open和closed來(lái)對(duì)子窗口的控制,需要父窗口和子窗口之間進(jìn)行互動(dòng)。2010-04-04