这次的顺利还得益于上次的ExtJs项目中的上千次firebug脚本调试，从中学习了不少知识。

我觉得难点主要有两个

• 第一个难点与jQuery无关，全关系到了全局，那就是CSS样式的设置。顶层的li元素的position应设为relative，次级菜单li元素的position设为absolute
• 判断鼠标激活的元素是否位于顶层，因为这直接影响到了sub menu位置的left坐标的值

代码：

$(function(){
    var $mainmenu = $('#myslidemenu>ul');
    //获得有sub menu的li 即folder item
    var $top = $mainmenu.find('ul').parent();
    //遍历所有top menu
    $top.each(function(){
        //鼠标移到的folder节点
        var $folder = $(this);
        var $sub_folder = $folder.find('ul:eq(0)');
        this._dimension = {
            w: this.offsetWidth,
            h: this.offsetHeight,
            subWidth: $sub_folder.outerWidth,
            subHeight: $sub_folder.outerHeight()
        };
        //判断当前的元素是否top menu
        //因为sub menu会位于top menu的下方，而third menu是位于sub menu的右侧或者左侧，而这的top值会不同
        this.isTop = $folder.parents('ul').length == 1 ? true : false;
        $sub_folder.css({
            top: this.isTop ? this._dimension.h + 'px' : '0'
        });
        //添加hover事件
        $folder.hover(function(){
            //目标对象
            var $target_menu = $(this).find('ul:eq(0)');
            //坐标
            this._offsets = {
                left: $(this).offset().left,
                top: $(this).offset().top
            }
            //如果当前的元素位于顶层，那么sub menu的left值为0，即位于当前元素的正下方
            //否则，left值为当前元素的宽度，即位于当前元素的正右方
            var menuleft = this.isTop ? 0 : this._dimension.w;
            //判断弹出的菜单是否超出屏幕宽度
            //若超出，则显示在当前元素的左侧，否则显示在右侧
            menuleft = (this._offsets.left + menuleft + this._dimension.subWidth > $(window).width()) ? (this.isTop ? -this._dimension.subWidth + this._dimension.w : -this._dimensions.w) : menuleft;
            //目标对象没有运行动画
            if (!$target_menu.is(':animated')) {
                $target_menu.css({
                    left: menuleft + 'px',
                    width: this._dimension.subWidth
                }).slideDown('normal');//显示
            }
        }, function(){
            //目标对象
            var $target_menu = $(this).find('ul:eq(0)');
            $target_menu.slideUp('normal');//隐藏
        });//end hover
    });//end each
    $mainmenu.find("ul").css({
        display: 'none',
        visibility: 'visible'
    });
})

时间到，祝大家新年快乐！

jQuery中的动画效果只要是通过更改元素的位置、大小以及透明度来实现的。

• hide/show方法通过改变元素的hight、width两个属性值来实现元素的隐藏和现实
• slideUp/slideDown实现的是一种卷帘的效果，实现的方法是改变元素的height属性值
• fadeOut/fadeIn方法是改变元素的透明度
• animate则比较全面，可以根据需要从不同角度来实现动画交过，而上面的三个方法的效果都可以通过animate来实现

代码：

// jQuery tab

 $(function(){
    //页面初始化时 获得激活的tab的索引
    var index = $('div.tab_header').index($('div.header_highlight'));
    //显示激活的tab对应的content内容
    $('div.tab_content').eq(index).slideDown('fast');
    //为tab添加click事件
    $('div.tab_header').click(function(){
        //点击的tab已经 被激活，结束
        if ($(this).is('.header_highlight')) {
            return;
        }
        //判断激活的tab是否正处于对话中
        if (!$('div.header_highlight').is(':animated')) {
            //更新tab样式
            $('div.header_highlight').removeClass('header_highlight');
            $(this).addClass('header_highlight');
            //获得激活的tab的索引
            var index = $('div.tab_header').index($(this));
            $('div.tab_content:visible').slideUp('fast');
            $('div.tab_content').eq(index).slideDown('fast');
        }
    });
})

这只是一个简单的例子，还会继续学习，下一个例子要做多级菜单。