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