欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery 無限級聯(lián)菜單案例分享

 更新時間：2013年03月26日 10:10:13   作者：  
phpcms的地區(qū)級聯(lián)菜單，感覺寫的挺有意思于是自己也實現(xiàn)了個，感興趣的各位路過的可以參考下哈，希望本例可以幫助到你

看到phpcms的地區(qū)級聯(lián)菜單，感覺寫的挺有意思，就說說大致步驟，省得忘了。

對于地區(qū)級聯(lián)菜單的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函數(shù)中。不過，這個只是一個cache至于什么地方生成還不沒找到，所以暫時作為一個測試。（知道的同學(xué)告訴我哈！十分感謝）

在areaid（）的$js中添加

復(fù)制代碼 代碼如下:

function delChild(num)
{
$('#load_$field select').each(function(i,obj){
if(obj.id >num)
$('#'+obj.id).remove();
})
}

對應(yīng)的，在/load.php中elseif($field == 'areaid' && $value)修改
復(fù)制代碼 代碼如下:

$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)沒有下級地名時不會刪除多余的選擇框。
傳統(tǒng)的級聯(lián)菜單呢，個人覺得傳輸數(shù)據(jù)相對較大，而且和數(shù)據(jù)庫的關(guān)聯(lián)似乎不好，所以就不貼代碼了。

方法二：
復(fù)制代碼 代碼如下:

<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;} /*這一級是導(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;} /*這是第二級菜單*/
.menu li ul a { width:110px; }
.menu li ul a:hover { background:url(img/bg1.png);}
.menu li ul ul{ top:0;left:150px;} /*從第三級菜單開始,所有的子級菜單都相對偏移*/
</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>

相關(guān)文章

最新評論