刚接触JQUERY,想仿照这个网站的导航栏的WORK部分做一个折叠的效果,观察了一下它的jquery,有点看不懂。。。
刚刚忘了贴网站:http://mammothmedia.tv/
if($('#work').length == 0){
$('.link-subs').css({'display':'none'});
}else{
$('.work-menu').css({'height':'auto'}).addClass('open');
$('.link-subs').css({'display':'block'});
}
$('.main-link','.work-menu').click(function(){
if($(this).parent().hasClass('open')){
$('.link-subs').css({'display':'none'});
$(this).parent().css({'height':'35px'}).removeClass('open');
}else{
$(this).parent().css({'height':'auto'}).addClass('open');
$('.link-subs').css({'display':'block'});
}
</script>
在点击WORK之前,并没有"OPEN"
点击WORK之后,就多了“OPEN”
如果我要仿照这个自己做的话,要不要管OPEN的类?还是只要将其中的ID和CLASS替换成自己的?
逐行来看
if ($(this).parent().hasClass('open')) { //$(this).parent()取到li这个节点,如果有class里有open这个类
$('.link-subs').css({
'display': 'none'
}); //隐藏link-subs这个类的区域
$(this).parent().css({
'height': '35px'
}).removeClass('open'); //设置li的高度为35px并移除open类
} else { //如果有class里没有open这个类
$(this).parent().css({
'height': 'auto'
}).addClass('open'); //设置li的高度为auto并添加open类
$('.link-subs').css({
'display': 'block'
}); //显示link-subs这个类的区域,display设为block
}
逻辑很清楚啊,总之就是判断li里有没有open这个类,如果有说明该标签是打开状态,那就把子节点中的ul中的内容隐藏并删除open类,反之显示ul中的内容并添加open类。
代码已经写的很清晰了
function() {
// 已经展开列表
if ($(this).parent().hasClass('open')) {
// 隐藏子列表
$('.link-subs').css({
'display': 'none'
});
// 调整父节点高度, 并删除class open
$(this).parent().css({
'height': '35px'
}).removeClass('open');
}
// 未展开列表
else {
// 调整父节点高度, 并增加class open
$(this).parent().css({
'height': 'auto'
}).addClass('open');
// 显示子列表
$('.link-subs').css({
'display': 'block'
});
}
}