左側分類導航選單

愛六六發表於2013-07-29

左側分類導航選單

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


相關文章