网站主导航三级菜单

做了这么多项目，发现网站横向主导航带3级的一般较少，网站参照过很多三级菜单的代码，发现兼容性很差，自己整了一个

带三级栏目的才会出现小箭头，不带三级栏目的不显示小箭头

结构是这样：

<div class="header_menu">

　　<ul>

　　　　　　<li class="mm"><a href="about.html">关于我们</a>
                                            <ul class="erji">
                                                     <li class="nohas"><a title="公司简介" href="aboutUs.html">公司简介</a>
                                                                <ul class="sanji">
                                                                    <li><a title="联系方式" href="llianxifangshi.html">联系方式</a></li>
                                                                    <li><a title="信息反馈" href="feedback.html">信息反馈</a></li>
                                                                    <li><a title="FAQ" href="FAQ.html">FAQ</a></li>
                                                                  </ul>
                                                      </li>
                                                      <li class="nohas"><a title="荣誉资质" href="honor.html">荣誉资质</a></li>
                                                </ul>
                     </li>

 　</ul>

</div>

 

然后用js改变含有三级栏目的li的类名，将nohas改为has，给has样式的li加上小箭头的背景，js如下：

/*含有三级菜单的栏目多一个箭头，且最后的li没有边*/
$(function(){
        var i = $(".header_menu > ul > li").length;
        for(var k=1;k<i;k++){
            var x=$(".header_menu > ul > li").eq(k).find("li.nohas").length;
            $(".header_menu > ul > li").eq(k).find("ul.erji > li:last").find("a").first().css("background","url(Images/submenu.png) center top no-repeat");
            for(var e=0;e<x;e++){
                var text = $(".header_menu > ul > li").eq(k).find("li.nohas").eq(e).find("ul").hasClass("sanji");
                if(text==true){
                    $(".header_menu > ul > li").eq(k).find("li.nohas").eq(e).addClass("has");
                    $(".header_menu > ul > li").eq(k).find("li.nohas").eq(e).removeClass("nohas");
                    }
                }
            }
        
    })

然后再控制鼠标移进移出的效果：

$(function(){
    $(".header_menu>ul>li").mouseover(function () {
        $("ul.erji").hide();
        $(".header_menu>ul>li").find("a").removeClass("hover");
        $(this).find("a:first").addClass("hover");
        $(this).find("ul.erji").show();
        $(".header_menu ul ul li.nohas").mouseover(function(){
            $("ul.sanji").hide();
            $("li.has").find("a:first").removeClass("hover");
            });
        $(".header_menu ul ul li.has").mouseover(function () {
            $("ul.sanji").hide();
            $(this).find("a:first").addClass("hover");
            $(this).find("ul").show();
        });
        $("ul.sanji").mouseleave(function(){
            $(this).hide();
            });
        $("ul.erji").mouseleave(function(){
            $(this).hide();
            });    
    });
    
$(".header_menu>ul>li").mouseleave(function () {
    $(this).find("ul").hide();
    $(this).find("a").removeClass("hover");
    });
    
});