这段代码其实是用来高亮导航和显示子菜单的:
html代码结构大概如下:<ul class="GoodsDropNavs">
    <li class="n-cat-depth-1 nobg">
        <a class="depth-1" href="./">
            <em>
                首页
            </em>
        </a>
    </li>
    <li class="n-cat-depth-1">
        <a class="depth-1" href="/browse/category-16.html">
            <em>
                童装
            </em>
        </a>
        <table cellpadding="0" cellspacing="0" border="0" class="n-cat-popup"
        style="display:none;">
            <tr>
                <td class="n-cat-drop-2">
                    <ul>
                        <li class="n-cat-depth-0">
                            <span>
                                功能分类
                            </span>
                        </li>
                        <li>
                            <a href="/browse/category-26.html">
                                连衣裙
                            </a>
                        </li>
                    </ul>
                </td>
                <td class="m-cat-drop-2">
                    <ul class="brand">
                        <li class="m-cat-depth-0">
                            <span>
                                品牌分类
                            </span>
                        </li>
                        <li class="m-cat-depth-2">
                            <a href="./?gallery-37-b,24-0--1--grid.html">
                                皇玛士wames(83)
                            </a>
                        </li>
                    </ul>
                    <ul class="tagtree">
                        <li>
                            <a href="./?gallery-37--8--1--grid.html">
                                畅销排行
                            </a>
                        </li>
                        <li>
                            <a href="./?gallery-37--1--1--grid.html">
                                最新到货 立即抢购
                            </a>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
    </li>
    <li class="n-cat-depth-1">
        <a class="depth-1" href="/browse/category-17.html">
            <em>
                睡衣
            </em>
        </a>
        <table cellpadding="0" cellspacing="0" border="0" class="n-cat-popup"
        style="display:none;">
            <tr>
                <td class="n-cat-drop-2">
                    <ul>
                        <li class="n-cat-depth-0">
                            <span>
                                功能分类
                            </span>
                        </li>
                        <li>
                            <a href="/browse/category-27.html">
                                睡衣套装
                            </a>
                        </li>
                    </ul>
                </td>
                <td class="m-cat-drop-2">
                    <ul class="brand">
                        <li class="m-cat-depth-0">
                            <span>
                                品牌分类
                            </span>
                        </li>
                        <li class="m-cat-depth-2">
                            <a href="./?gallery-37-b,24-0--1--grid.html">
                                皇玛士wames(83)
                            </a>
                        </li>
                    </ul>
                    <ul class="tagtree">
                        <li>
                            <a href="./?gallery-37--8--1--grid.html">
                                畅销排行
                            </a>
                        </li>
                        <li>
                            <a href="./?gallery-37--1--1--grid.html">
                                最新到货 立即抢购
                            </a>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
    </li>
</ul>下面这段代码用来高亮(即将当前地址栏的地址和导航比较,相等的话就加current样式)和鼠标移到大类的时候显示其隐藏的子菜单的,原来是用mootools写的,但我现在想用jq了,不过不熟悉mootools和jq,所以没能转化,谁能帮我转下,谢谢window.addEvent('domready',
function() {
    var cats = $ES('.GoodsDropNavs .n-cat-depth-1');
    if (!cats[0]) return;
    var findend = function(needle, str) {
        var pos;
        if ((pos = (str + '').lastIndexOf(needle))) {
            return str.substr(pos + needle.length)
        }
    };
    var findext = function(src) {
        if (!src) return '';
        return findend('/', src).replace(/^(index\.php)?(\?)?/i, '').replace(/%2C/ig, ',')
    };
    var furl = function(url) {
        var pros = findext(url).replace(/_ANY_/ig, '').split('-');
        if (pros[2]) {
            if (/t,\d+/.test(pros[2])) {
                pros[1] += '-' + pros[2].match(/^(.+)?(t,\d+)(.+)?$/)[2]
            } else if (/^p,\d+/.test(pros[2])) {
                pros[1] += '-' + pros[2].match(/^(p(,\d+)+)(.+)?$/)[1]
            }
        }
        return pros[1] + (pros[3] ? ('-' + pros[3]) : '')
    };
    var local = u = location.href,
    n;
    if (u.indexOf('product') != -1) {
        u = (n = $ES('.Navigation a')) && n.length ? findext(n[n.length - 1].href) : u
    }
    var u = furl(u);
    var current = false;
    cats.each(function(cat, i) {
        var popup = cat.getElement('.n-cat-popup');
        var a = $ES('a', cat);
        if (u == furl(a[0].href)) {
            cat.store('current', a[0].addClass('current'))
        }
        var sub;
        for (var i = 1; i < a.length; i++) {
            var a1 = a[i];
            if (!current && (local == a1.href || u == furl(a1.href))) {
                a1.addClass('now');
                cat.store('current', a[0].addClass('current'));
                current = true
            }
            sub = a1.getParent();
            if (sub.hasClass('sub')) {
                sub.addEvents({
                    'mouseenter': function(e) {
                        this.getElement('.n-cat-popup-3').setStyles({
                            'display': 'block',
                            'margin': '-25px 0 0 ' + (this.getSize().x - 5) + 'px'
                        });
                        this.getElement('.depth-3').addClass('on')
                    },
                    'mouseleave': function() {
                        this.getElement('.n-cat-popup-3').setStyle('display', 'none');
                        this.getElement('.depth-3').removeClass('on')
                    }
                })
            }
        }
        if (popup) {
            cat.addEvents({
                'mouseenter': function() {
                    popup.setStyle('display', 'block');
                    if (!this.retrieve('current')) a[0].addClass('current')
                },
                'mouseleave': function() {
                    popup.setStyle('display', 'none');
                    if (!this.retrieve('current')) a[0].removeClass('current')
                }
            })
        }
    })
})
mootoolsjavascript

解决方案 »

  1.   

    我只会jquery这个mootools不了解啊。正在学习中
      

  2.   

    那个写得太复杂了。没那么麻烦,具体的分两步
    第一步:功能实现
    1:JQ写好基本功能
    2:移动到大类时使用cookie保存大类的序号,点击子类时再次使用cookie保存子类的序号第二步:初始化
    1:根据cookie中大类的序号,执行$('.depth-1').eq(序号).click()
    2:根据cookie中保存的子类序号,去实现子类的选中状态切换
      

  3.   

    有道理,是我考虑不周全。那就只能从子类的href与当前的进行比对,然后往上查找大类,并触发大类的click事件了