这段代码其实是用来高亮导航和显示子菜单的:
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
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:JQ写好基本功能
2:移动到大类时使用cookie保存大类的序号,点击子类时再次使用cookie保存子类的序号第二步:初始化
1:根据cookie中大类的序号,执行$('.depth-1').eq(序号).click()
2:根据cookie中保存的子类序号,去实现子类的选中状态切换