新人，如何用jquery做一个类似的导航栏

Question

刚接触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替换成自己的？

Answer 1

代码已经写的很清晰了

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'
        });
    }
}

Answer 2

逐行来看

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类。