谁能帮帮我把这段代码由mootools转成jq的?

scyyzgxh 2013-01-22 11:05:12
这段代码其实是用来高亮导航和显示子菜单的:
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')
}
})
}
})
})
...全文
253 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
泡泡鱼_ 2013-07-18
  • 打赏
  • 举报
回复
有道理,是我考虑不周全。那就只能从子类的href与当前的进行比对,然后往上查找大类,并触发大类的click事件了
scyyzgxh 2013-07-17
  • 打赏
  • 举报
回复
引用 3 楼 crying_boy 的回复:
那个写得太复杂了。没那么麻烦,具体的分两步 第一步:功能实现 1:JQ写好基本功能 2:移动到大类时使用cookie保存大类的序号,点击子类时再次使用cookie保存子类的序号 第二步:初始化 1:根据cookie中大类的序号,执行$('.depth-1').eq(序号).click() 2:根据cookie中保存的子类序号,去实现子类的选中状态切换
这样可不好,比如我从0号页面转到1号页面,它就保存了1号页面,我点击后退按钮退回0号页面,它也会是1号高亮。。。
泡泡鱼_ 2013-07-10
  • 打赏
  • 举报
回复
那个写得太复杂了。没那么麻烦,具体的分两步 第一步:功能实现 1:JQ写好基本功能 2:移动到大类时使用cookie保存大类的序号,点击子类时再次使用cookie保存子类的序号 第二步:初始化 1:根据cookie中大类的序号,执行$('.depth-1').eq(序号).click() 2:根据cookie中保存的子类序号,去实现子类的选中状态切换
会飞的蛋蛋 2013-07-10
  • 打赏
  • 举报
回复
我只会jquery这个mootools不了解啊。正在学习中
scyyzgxh 2013-01-30
  • 打赏
  • 举报
回复
来人,结帐。。

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧