jquery 無限級(jí)聯(lián)菜單案例分享
看到phpcms的地區(qū)級(jí)聯(lián)菜單,感覺寫的挺有意思,就說說大致步驟,省得忘了。
對(duì)于地區(qū)級(jí)聯(lián)菜單的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函數(shù)中。不過,這個(gè)只是一個(gè)cache至于什么地方生成還不沒找到,所以暫時(shí)作為一個(gè)測(cè)試。(知道的同學(xué)告訴我哈!十分感謝)
在areaid()的$js中添加
function delChild(num)
{
$('#load_$field select').each(function(i,obj){
if(obj.id >num)
$('#'+obj.id).remove();
})
}
對(duì)應(yīng)的,在/load.php中elseif($field == 'areaid' && $value)修改
$str =
'<select id="'.$id.'"
onchange="delChild('.$id.');$(\'#'.$value.'\').val(this.value);this.disabled=false;area_load(this.value);"><option
value="1">'.$LANG['please_select'].'</option>';
就能去掉"選定地區(qū)后不能更改"的效果,并且當(dāng)沒有下級(jí)地名時(shí)不會(huì)刪除多余的選擇框。
傳統(tǒng)的級(jí)聯(lián)菜單呢,個(gè)人覺得傳輸數(shù)據(jù)相對(duì)較大,而且和數(shù)據(jù)庫(kù)的關(guān)聯(lián)似乎不好,所以就不貼代碼了。
方法二:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu li').hover(function(){
$(this).children('ul').show();
$(this).focus().addClass('focusa')
},function(){
$(this).children('ul').hide();
$(this).focus().removeClass('focusa');
});
});
</script>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.menu { height:30px; line-height:30px; }
.menu li { float:left; position:relative;} /*這一級(jí)是導(dǎo)航*/
.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }
.menu li a:hover { color:#000; background:url(img/bg1.png); }
.menu li a.more { background:url(img/there.png) no-repeat 130px center; }
.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*這是第二級(jí)菜單*/
.menu li ul a { width:110px; }
.menu li ul a:hover { background:url(img/bg1.png);}
.menu li ul ul{ top:0;left:150px;} /*從第三級(jí)菜單開始,所有的子級(jí)菜單都相對(duì)偏移*/
</style>
<ul class="menu">
<li><a href="#">菜單一</a>
<ul class="one">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#" class="more">菜單五</a>
<ul class="two">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#" class="more">菜單五</a>
<ul class="three">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#" class="more">菜單五</a>
<ul class="four">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#">菜單五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單二</a>
<ul class="one">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#" class="more">菜單三</a>
<ul class="two">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#" class="more">菜單三</a>
<ul class="three">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#">菜單五</a></li>
</ul>
</li>
<li><a href="#">菜單四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
<li><a href="#">菜單五</a>
<ul class="one">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
</ul>
</li>
</ul>
- jQuery 無限級(jí)菜單的簡(jiǎn)單實(shí)例
- jquery 無限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼
- 使用jquery菜單插件HoverTree仿京東無限級(jí)菜單
- jquery實(shí)現(xiàn)無限分級(jí)橫向?qū)Ш讲藛蔚姆椒?/a>
- jQuery樹形下拉菜單特效代碼分享
- jquery+CSS實(shí)現(xiàn)的多級(jí)豎向展開樹形TRee菜單效果
- json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
- 基于jquery實(shí)現(xiàn)的樹形菜單效果代碼
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
- 基于jquery實(shí)現(xiàn)無限級(jí)樹形菜單
相關(guān)文章
網(wǎng)頁(yè)下載文件期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作
網(wǎng)頁(yè)下載文件時(shí)需要一段時(shí)間,在這期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作,將div覆蓋在網(wǎng)頁(yè)上,將網(wǎng)頁(yè)鎖住,具體實(shí)現(xiàn)如下2014-06-06jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值,所以無法達(dá)到我們的要求,那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值,下面與大家分享方法2014-09-09jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)
這篇文章主要介紹了如何修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)的相關(guān)資料,需要的朋友可以參考下2016-03-03jquery實(shí)現(xiàn)的偽分頁(yè)效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的偽分頁(yè)效果代碼,涉及jQuery頁(yè)面元素操作與數(shù)值計(jì)算的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)設(shè)置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果
本篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
效果說明:配合已有css樣式,載入插件后,網(wǎng)頁(yè)元素可以隨意在窗口內(nèi)拖拽,設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng),可根據(jù)需要選擇。另外,當(dāng)頁(yè)面上有多個(gè)可拖拽元素時(shí),可以載入另外一個(gè)用于設(shè)置z-index的插件,模擬windows窗口點(diǎn)擊置頂效果。2013-08-08關(guān)于jquery ajax 調(diào)用帶參數(shù)的webservice返回XML數(shù)據(jù)一個(gè)小細(xì)節(jié)
很早之前用jquery調(diào)用帶參數(shù)的WS返回XML格式數(shù)據(jù)的時(shí)候,傳參的時(shí)候會(huì)出現(xiàn)錯(cuò)誤。問了問度娘和谷哥,這娘兒倆一個(gè)德行,里面的多數(shù)帖子沒什么意義,你粘我,我復(fù)制你2012-07-07