jQuery下拉菜單在普通的javascript

我正在尋找一些幫助來改變我的jQuery導航菜單爲純javascript。我已經閱讀了很多關於將jquery轉換爲javascript的問題，但我無法理解這些變化。jQuery下拉菜單在普通的javascript

基本上jQuery的切換的類，所以在下拉菜單顯示和隱藏，

這裏是我的jQuery

$(document).ready(function() { 

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

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

    }); 
});

這是我在與我的平原，JavaScript的

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

來源

2015-01-13 JamesP

請問你爲什麼會想你的JQuery擺在首位翻譯？ –

你在你的小提琴中有一個語法錯誤：缺少'）'update：http://jsfiddle.net/zck98b42/1/ additionaly，DOMContentLoaded在我的Chrome中不執行任何操作 – Mephiztopheles

這只是一個實驗，我想看看是否我可以做到這一點沒有jQuery，因爲它的這麼少量的代碼，我不認爲這是值得加載所有的jQuery這一點的功能 – JamesP

我不知道你想要什麼，但如果你正在尋找使用下拉菜單普通的JavaScript嘗試此鏈接： 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"); 
    } 
}

來源

2016-04-11 17:13:55

jQuery下拉菜單在普通的javascript

回答

相關問題