乱世浮生

在上一篇学习比较中写了简单个tab联系，逻辑性不是很强。这次的是我从网上看到的一个例子--jQuery多级菜单，然后自己重新了一遍，并把自己的理解加在代码的注释中。上一次看jQuery的时候就有看到这个例子，只怪自己当时学习不够认真扎实，照葫芦画瓢写了一遍也没实现，更别说理解了。这次看书的时候比较用心，硬是看明白了这次。demo

这次的顺利还得益于上次的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'
    });
})

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