jquery 无限级下拉菜单的简单实现代码(2)

(function($){
    $.fn.extend({
        menu:function(options){
            var defaults = {
                data:[],
                ulId:"baseMenu"
            };
            var options = $.extend(defaults, options);
            // 开始拼接ul,li
            $.each(options.data,function(i,v){
                var li = $("<li></li>");
                var _a = $("<a>"+options.data[i].name+"</a>");
                _a.attr("href",options.data[i].url)
                    .appendTo(li);

                _each(options.data[i],li);
                li.appendTo($("#"+options.ulId));
            });
            // 给li添加事件
            $(this).find("li").hover(function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").show();
            },function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").hide();
            });
        }
    });
})(jQuery);

因为支持无限级,所以肯定会用到递归方法:

复制代码 代码如下: