基于jquery實現(xiàn)無限級樹形菜單
本文實例為大家分享了基于jquery實現(xiàn)無限級樹形菜單效果,具有一定的參考價值,具體內(nèi)容如下
效果圖:
實現(xiàn)代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無限級樹形菜單</title> </head> <script src="jquery.min.js"></script> <style> ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;} ul.a li{list-style-type:none;cursor:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none} .treelist{width:222px;} ul.a div{height:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px} .shows{display:block} </style> <body> <div class="treelist"> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li> <ul class="a"> <div>ccccc</div> <li> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> </li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> </li> <li>xxxx</li> </ul> </li> <li>xxxx</li> <li>xxxx</li> </ul> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> <ul class="a"> <div>ccccc</div> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> <li>xxxx</li> </ul> </div> <script> /* $(".a div").each(function(i){ var w=$(this).parents("li").width(); $(this).css("width",w-100+"px"); }) */ $(".a").click(function(){ $(this).find("li").click(function(event){ return false }) if($(this).hasClass("shows")){ $(this).removeClass("shows"); $(this).find("li").find("ul").removeClass("shows"); $(this).find("li").hide(); $(this).find("div").css("background","url(jia.jpg) no-repeat"); }else{ $(this).addClass("shows"); $(this).find("li").show(); $(this).find("li").find("ul").find("li").hide(); $(this).show(); $(this).find("div").eq(0).css("background","url(jian.jpg) no-repeat"); } }) </script> </body> </html>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
詳解ajax的data參數(shù)錯誤導(dǎo)致頁面崩潰
本篇文章給大家詳細(xì)分析了ajax的data參數(shù)錯誤導(dǎo)致頁面崩潰的原因以及解決辦法,有需要的朋友參考學(xué)習(xí)下。2018-04-04Jquery 獲取表單text,areatext,radio,checkbox,select值的代碼
Jquery 獲取表單text,areatext,radio,checkbox,select值的實現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。都是必須要了解的。2009-11-11jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法
這篇文章主要介紹了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07基于jquery實現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動
一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動效果,在瀏覽器屏幕內(nèi),人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動,本篇文章給大家介紹基于jquery實現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動,有需要的朋友可以參考下2015-08-08JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
經(jīng)常會用到iframe,難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素,下面為大家簡單介紹下本人的使用心得2013-08-08z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
由于我的博客主要是代碼分享,很多貼的代碼,都很長。很多時候我都是手動給他換行。但是今天實在是受不了。從網(wǎng)上找個辦法解決一下2014-11-11jQuery Migrate 1.1.0 Released 注意事項
jQuery開發(fā)團隊前一段時間發(fā)布了jQuery 1.9版本,刪除了1.8版本中的部分API,為了使前端開發(fā)者能夠順利遷移至該版本,該團隊還發(fā)布了遷移插件jQuery Migrate2014-06-06