左侧分类导航菜单

左侧分类导航菜单

html结构：

<div id="showlist" class="showlist" style="display: block; ">
<ul class="lists">
<li>
<!-- li 相对定位 多级 -->
<a class="tit">手机</a>
<em class="icon-common icon-common-arrowright"></em>
<!-- 绝对定位 icon图标
-->
<label class="tri" ><i></i></label>
<!-- 绝对定位 tri三角形
-->
<div class="show cfl"
style="display:none;">
<!-- 绝对定位 展示列表
-->
<div class="lt">
<dl>
<dt>分类</dt>
<dd><a href="#">小米手机</a></dd>
<dd><a href="#">三星手机</a></dd>
<dd><a href="#">苹果手机</a></dd>
</dl>
<dl>
<dt>热门</dt>
<dd><a href="#">小米手机</a></dd>
<dd><a href="#">三星手机</a></dd>
</dl>
</div>
<div class="rt">
<a href="#">
<img alt="" src="./images/baohu.jpg">
</a>
</div>
</div>
</li>
</ul>
</div>

 

js代码：

$(function(){
var showlist = $("#showlist");
var isok = true;
showlist.find("li").live("mouseover",function(){
var jthis = $(this);
if(isok){
jthis.addClass("on");
jthis.find(".tri").show();
var index = jthis.index();
if(jthis.index()<=5){
var val = index*-41;
jthis.find(".show").show().css({"top":val+"px"});
} else{
var val = (index - 5) *-41;
jthis.find(".show").show().css({"top":val+"px"});
}
}
});
showlist.find("li").live("mousemove",function(){
var jthis = $(this);
if(isok){
jthis.addClass("on");
jthis.find(".tri").show();
var index = jthis.index();
if(jthis.index()<=5){
var val = index*-41;
jthis.find(".show").show().css({"top":val+"px"});
} else{
var val = (index - 5) *-41;
jthis.find(".show").show().css({"top":val+"px"});
}
}
});
showlist.find("li").live("mouseleave",function(){
$(this).removeClass("on");
$(this).find(".tri").hide();
$(this).find(".show").hide();
isok = false;
setTimeout(function(){
isok = true;
},100);
});
});