快捷導(dǎo)航

基于jquery實(shí)現(xiàn)無限級(jí)樹形菜單

更新時(shí)間：2016年03月22日 15:40:04 作者：netshow-vip

這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)無限級(jí)樹形菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了基于jquery實(shí)現(xiàn)無限級(jí)樹形菜單效果，具有一定的參考價(jià)值，具體內(nèi)容如下

效果圖：

實(shí)現(xiàn)代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無限級(jí)樹形菜單</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>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery簡(jiǎn)單倒計(jì)時(shí)效果完整示例
這篇文章主要介紹了jQuery簡(jiǎn)單倒計(jì)時(shí)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間的計(jì)算與頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)的下拉和收縮效果示例
下拉和收縮類似的效果應(yīng)用非常的頻繁，這篇文章主要介紹了jquery實(shí)現(xiàn)的下拉和收縮效果,需要的朋友可以參考下
2014-08-08
jquery判斷瀏覽器后退時(shí)候彈出消息的方法
本節(jié)主要介紹了jquery判斷瀏覽器后退時(shí)候彈出消息 ,需要的朋友可以參考下
2014-08-08
在JQuery dialog里的服務(wù)器控件事件失效問題
今天遇到個(gè)問題，在dialog中放了服務(wù)器端的空間dropdownlist，但是寫selectindexchange事件卻怎么也觸發(fā)不了，然后就在網(wǎng)上搜，終于看到有個(gè)哥們解決了這個(gè)問題，真的謝謝他。
2010-12-12
jQuery的one()方法用法實(shí)例
這篇文章主要介紹了jQuery的one()方法用法,實(shí)例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個(gè)一次性的事件處理方法使用技巧,需要的朋友可以參考下
2015-01-01
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下
2016-01-01
jQuery中siblings()方法用法實(shí)例
這篇文章主要介紹了jQuery中siblings()方法用法,實(shí)例分析了siblings()方法的功能、定義及獲取匹配元素集合中每一個(gè)元素的同輩元素的使用技巧,是進(jìn)行元素篩選時(shí)非常實(shí)用的方法,需要的朋友可以參考下
2015-01-01
jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會(huì)報(bào)錯(cuò).
2013-04-04
jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-06-06
jQuery 源碼分析筆記(5) jQuery.support
接下來是非常糾結(jié)的一個(gè)話題，也是所有JS庫必須實(shí)現(xiàn)的一個(gè)功能：瀏覽器兼容性和為開發(fā)者屏蔽這些差異。
2011-06-06