내 jquery 코드를 최적화하는 방법

Question

대학의 조직을위한 새로운 디자인을 만들고 있으며, JQuery를 사용하여 원하는대로 할 수 있도록 내비게이션 막대를 사용했습니다 (특정 nav- 항목 클릭, 그 또는 다른 탐색 항목이 클릭되면 다시 슬라이드 [두 번째 대/소문자가 참이면 새 탐색 항목을 아래로 슬라이드]).

관련 JQuery와 :

function toggleMembers() { 
if ($("#members-drop-down").is(":visible")) { 
    $("#members-container").animate(
    { 
     opacity: "0" 
    }, 
    600, 
    function(){ 
     $("#members-drop-down").slideUp(); 
    } 
); 
$("#members").removeClass('active'); 
} 
else if ($("#about-drop-down").is(":visible")) { 
    $("#about-container").animate(
     { 
      opacity: "0" 
     }, 
     600, 
     function(){ 
      $("#about-drop-down").slideUp(); 
     } 
    ); 
    $("#about").removeClass('active'); 
    $("#members-drop-down").slideDown(600, function(){ 
     $("#members-container").animate(
      { 
        opacity: "1" 
      }, 
      600 
     ); 
    }); 
    $("#members").addClass('active'); 
} 
else if ($("#store-drop-down").is(":visible")) { 
    $("#store-container").animate(
     { 
      opacity: "0" 
     }, 
     600, 
     function(){ 
      $("#store-drop-down").slideUp(); 
     } 
    ); 
    $("#store").removeClass('active'); 
    $("#members-drop-down").slideDown(600, function(){ 
    $("#members-container").animate(
     { 
      opacity: "1" 
     }, 
     600 
    ); 
    }); 
    $("#members").addClass('active'); 
} 
else { 
    $("#members-drop-down").slideDown(600, function(){ 
     $("#members-container").animate(
       { 
        opacity: "1" 
       }, 
       600 
     ); 
    }); 
    $("#members").addClass('active'); 
} 
} 

불행하게도하지만, JQuery와 내가 썼다는 HTML의 모든보다 더 많은 공간을 차지합니다. 어떻게 이것을 단축하고 최적화 할 수 있습니까?

내 JSFiddle with the full code. 다음 중 하나를 사용하여

Answer 1

스크립트의 축소 자바 스크립트 파일 :

• JS Compress
• YUI Compressor
• JavaScript Minifier