左侧分类导航菜单

左侧分类导航菜单

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);
    });
});