自制导航

最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求，为了简洁，在网上找了很多导航菜单控件都不大适合，所以突发奇想自己写个吧~该动手就动手啊~

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div>
    <ul class="nav" hid="root">
        <li><a href="/DavidTest/Level1Li" testid="aa">一级li 1</a>
            <ul>
                <li><a href="/DavidTest/Level2Li1" testid="bb">二级 li 1</a></li>
                <li><a href="/DavidTest/Level2Li2" testid="cc">二级 li 2</a>
                    <ul>
                        <li><a href="/DavidTest/Level3Li1" testid="dd">三级 li 1</a></li>
                        <li><a href="/DavidTest/Level3Li2" testid="ee">三级 li 2</a></li>
                        <li><a href="/DavidTest/Level3Li3" testid="ff">三级 li 3</a></li>
                        <li><a href="/DavidTest/Level3Li4" testid="gg">三级 li 4</a></li>
                        <li><a href="/DavidTest/Level3Li5" testid="hh">三级 li 5</a></li>
                        <li><a href="/DavidTest/Level3Li6" testid="ii">三级 li 6</a>
                            <ul>
                                <li><a href="/DavidTest/Level4Li1" testid="jj">四级 li 1</a></li>
                                <li><a href="/DavidTest/Level4Li2" testid="kk">四级 li 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="/DavidTest/Level2Li3" testid="ll">二级 li 3</a>
                    <ul>
                        <li><a href="/DavidTest/Level3Li7" testid="mm">三级 li 7</a></li>
                        <li><a href="/DavidTest/Level3Li8" testid="nn">三级 li 8</a></li>
                        <li><a href="/DavidTest/Level3Li9" testid="oo">三级 li 9</a></li>
                        <li><a href="/DavidTest/Level3Li10" testid="pp">三级 li 10</a></li>
                        <li><a href="/DavidTest/Level3Li11" testid="qq">三级 li 11</a></li>
                    </ul>
                </li>
                <li><a href="/DavidTest/Level2Li4" testid="rr">二级 li 4</a>
                    <ul>
                        <li><a href="/DavidTest/Level3Li12" testid="ss">三级 li 12</a></li>
                        <li><a href="/DavidTest/Level3Li13" testid="tt">三级 li 13</a></li>
                        <li><a href="/DavidTest/Level3Li14" testid="uu">三级 li 14</a></li>
                        <li><a href="/DavidTest/Level3Li15" testid="vv">三级 li 15</a></li>
                        <li><a href="/DavidTest/Level3Li16" testid="ww">三级 li 16</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/DavidTest/Level1Li2" testid="xx">一级li 2</a>
            <ul>
                <li><a href="/DavidTest/Level2Li5" testid="ss">二级 li 5</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="http://www.cnblogs.com/Scripts/navigation.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    var nav = new $.fn.jNavigationControl({
        renderTo: $("div[hid='navDiv']")
    });
        
</script>

 

(function ($) {
    $.extend($.fn, {
        jNavigationControl: function () {
            var options = $.extend({
                renderTo: $(document.body)
            });

            options.renderTo = (typeof options.renderTo == 'string' ? $(options.renderTo) : options.renderTo);

            //使用时将testid属性换成href属性即可
            var currentUrlHref = window.location.pathname.toLowerCase();

            var root = $("ul[hid='root']");
            $(root).find(">li").attr("first_level", true);
            $(root).find(">li>a").addClass("nav_first_style");

            //递归向下查找可展开元素并且绑定toggle展开事件
            var searchChildren = function (root) {
                if (root.find(">li").length > 0) {
                    $(root).addClass("ul_style");
                    var liChildren = root.find(">li");
                    $(liChildren).each(function (idx, item) {
                        searchChildren($(item));
                    })
                } else if (root.find(">ul").length > 0) {
                    $(root).addClass("li_style");
                    if ($(root).attr("first_level") != true.toString()) {
                        $(root).find(">a").addClass("li_style_a");
                    }

                    var aLink = $(root).find(">a");

                    $(aLink).toggle(function () {
                        $(this).addClass("li_style_a_selected");
                        //                        $(this).parent().find(">ul").show("fast");
                        $(this).parent().find(">ul").removeClass("none");

                        //隐藏非一级节点下的所有兄弟元素
                        if ($(this).parent().attr("first_level") != true.toString()) {
                            $(this).parent().siblings().find(">a").removeClass("li_style_a_selected");
                            $(this).parent().siblings().each(function (idx, item) {
                                removeClassAndHide(item);
                            })
                        } else {
                            $(this).addClass("nav_first_style_selected");
                            $(this).removeClass("li_style_a_selected");
                            $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected");
                            $(this).parent().siblings().each(function (idx, item) {
                                removeClassAndHide(item);
                            })
                        }

                    }, function () {
                        if ($(this).parent().attr("first_level") == true.toString()) {
                            $(this).addClass("nav_first_style_selected");
                            $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected");
                        }
                        removeClassAndHide($(this).parent());
                    })

                    var ulChildren = root.find(">ul");
                    $(ulChildren).each(function (idx, item) {
                        //                        $(item).hide("fast");
                        $(item).addClass("none");
                        searchChildren($(item));
                    });
                } else {
                    if ($(root).attr("first_level") != true.toString()) {
                        $(root).find(">a").addClass("li_style_a");
                    }
                    $(root).addClass("li_style");
                    $(root).click(function () {
                        if ($(root).attr("first_level") != true.toString()) {
                            $(this).find(">a").addClass("li_style_a_selected");
                            $(this).siblings().find(">a").removeClass("li_style_a_selected");
                            $(this).siblings().each(function (idx, item) {
                                removeClassAndHide(item);
                                addFirstLevelClass(item);
                            })
                        } else {
                            $(this).find(">a").addClass("nav_first_style_selected");
                            $(this).find(">a").removeClass("li_style_a_selected");
                            $(this).siblings().find(">a").removeClass("nav_first_style_selected");
                            removeClassAndHide(this);
                        }

                    })
                }
            }


            //搜索初始化位置
            var findInitPosition = function () {
                var currentLi;
                $(root).find("a").each(function (index, aLink) {
                    if (currentUrlHref == $(aLink).attr("href").toString().toLowerCase()) {
                        currentLi = $(aLink).parent();
                    }
                })
                findInit(currentLi);
            }

            //递归查找初始位置
            var findInit = function (currentLi) {
                if ($(currentLi).parent().parent().find(">a").length > 0) {
                    findInit($(currentLi).parent().parent());
                }
                if ($(currentLi).find(">ul").length > 0) {
                      $(currentLi).find(">ul").removeClass("none");
//                    $(currentLi).find(">ul").show("fast");
                }

                if ($(currentLi).attr("first_level") != true.toString()) {
                    $(currentLi).find(">a").addClass("li_style_a_selected");
                } else {
                    $(currentLi).find(">a").addClass("nav_first_style_selected");
                }
            }

            //递归向下删除所有子节点的选中样式
            var removeClassAndHide = function (li) {
                if ($(li).attr("first_level") != true.toString()) {
                    $(li).find(">a").removeClass("li_style_a_selected");
                    //                    $(li).find(">ul").hide("slow");
                    $(li).find(">ul").addClass("none");

                    if ($(li).find(">ul").length > 0) {
                        $(li).find(">ul>li").each(function (idx, item) {
                            removeClassAndHide(item);
                        });
                    }
                } else if ($(li).attr("first_level") == true.toString()) {
                    //                    $(li).find(">ul").hide("slow");
                    $(li).find(">ul").addClass("none");

                    $(li).find(">ul>li").each(function (idx, item) {
                        removeClassAndHide(item);
                    })
                } else {
                    //                    $(li).find(">ul").show("slow");
                    $(li).find(">ul").removeClass("none");
                    $(li).find(">ul>li").each(function (idx, item) {
                        removeClassAndHide(item);
                    })
                }
            }

            //递归向上添加第一层节点样式
            var addFirstLevelClass = function (li) {
                if ($(li).attr("first_level") != true.toString()) {
                    addFirstLevelClass($(li).parent().parent());
                } else {
                    if (!$(li).find(">a").hasClass("nav_first_style_selected")) {
                        $(li).find(">a").addClass("nav_first_style_selected");
                        $(li).siblings().find(">a").removeClass("nav_first_style_selected");
                    }
                }
            }

            //创建导航
            var createNav = function () {
                searchChildren(root);
                findInitPosition();
            }

            createNav();
        }
    });
})(jQuery)

 

不过暂时还没有封装成类似jquery的写法，其实还可以继续封成一个控件~