일반 자바 스크립트의 jQuery 드롭 다운 메뉴

Question

내 jquery 탐색 메뉴를 일반 자바 스크립트로 변경하는 데 도움이 필요합니다. jquery를 javascript로 변환하는 것에 관한 많은 질문을 읽었지 만 변경 사항에 대한 내 머리를 맞출 수는 없습니다.

는 기본적으로 JQuery와 내가 내 일반과에서 어딘지

다음

$(document).ready(function() { 

    $('.three-lines-menu').on('click', function(e){ 

     e.preventDefault(); 
     $('.js-menu').toggleClass('js-menu-responsive'); 

    }); 
}); 

가 여기에

내 JQuery와있다, 메뉴 쇼와 가죽 드롭 다운 있도록 클래스를 전환 자바 스크립트

document.addEventListener("DOMContentLoaded", function(event) { 

    var menu = document.getElementByClassName('js-menu'), 

    toggleClass = function (el, cl) { 
    hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl); 

    toggleClass(menu, 'js-menu-responsive'); 

    }; 
}; 

이것은 기사를 읽으려는 나의 시도이지만 작동하도록 할 수는 없으며 조언이나 올바른 방향으로 밀기 만하면 좋을 것입니다.

* 참고 - 내가 여기 즉 6,7,8

에 대한 지원이 필요하지 않은 것은 내가 정확하게 당신이 원하는 것과 잘 모르겠지만, 당신이 드롭 다운을 찾고 있다면 사용하여 내 js fiddle

Answer 1

입니다 첫 번째 장소에서 JQuery와 번역 싶어 왜 jsfiddle/javascript-dropdown

var clk = document.getElementById("clk"); 
clk.onclick = function() { 
    var hid = document.getElementById("hidden"); 
    if (hid.classList.contains("hide")) { 
    hid.classList.remove("hide"); 
    hid.classList.add("show"); 
    } else { 
    hid.classList.add("hide"); 
    hid.classList.remove("show"); 
    } 
} 

document.getElementById("under").onclick = function() { 
    document.getElementById("parent").innerHTML = "Undergraduate"; 
    if (document.getElementById("hidden").classList.contains("hide")) { 
    document.getElementById("hidden").classList.remove("hide"); 
    document.getElementById("hidden").classList.add("show"); 
    } else { 
    document.getElementById("hidden").classList.add("hide"); 
    document.getElementById("hidden").classList.remove("show"); 
    } 
} 
document.getElementById("grad").onclick = function() { 
    document.getElementById("parent").innerHTML = "Graduate"; 
    if (document.getElementById("hidden").classList.contains("hide")) { 
    document.getElementById("hidden").classList.remove("hide"); 
    document.getElementById("hidden").classList.add("show"); 
    } else { 
    document.getElementById("hidden").classList.add("hide"); 
    document.getElementById("hidden").classList.remove("show"); 
    } 
}