將Jquery Toggle轉換為Javascript

Question

我是Web編程的新手。 我構建了一個幻燈片導航，並希望使其從左到中間滑動。 事情是我剛剛找到了一個Jquery代碼。 我試圖通過在Google上進行搜索來查找它，但匹配項與我要找的東西不匹配。

這是代碼：

$('.nav-side .nav-toggle').on('click', function(e){
    e.preventDefault();
    $(this).parent().toggleClass('nav-open');
})

我想知道是否可以將其翻譯成Javascript，因為我想繼續使用HTML，CSS和Javascript。

有人可以幫我嗎？

Answer 1

在純JavaScript中，應該是這樣的：

var elements = document.querySelectorAll('.nav-side .nav-toggle');
[].slice.call(elements).forEach(function(element) {
    element.addEventListener('click', function() {
        element.parentNode.classList.toggle('nav-open');
        return false;
    }, false);
});

JSFiddle： https ：//jsfiddle.net/r0x7zehz/

Answer 2

您可以使用classList.toggle() ：

document.getElementsByClassName('nav-toggle')[0].addEventListener('click', function(e){
    e.preventDefault();
    e.target.parentNode.classList.toggle('nav-open');
});

這是一個codepen示例。

Answer 3

這是純JavaScript代碼

function clickHandler(dom)
{
    dom.addEventListener('click', function(e) {
        dom.parentNode.classList.toggle('nav-open');
        return false;
    }, false);
}
document.querySelector('.nav-side .nav-toggle').map(clickHandler);

Answer 4

這是您的HTML

<a href="#" class="nav-toggle" onclick="toggleFunction(this)">Toggle</a>

這是您的javascript，它添加了style =“ display：none;”。 當父樣式=“ display：block;”。 反之亦然

<script>
function toggleFunction(elem){
    var parent = elem.parentNode;
    if(hasClass(parent, 'nav-open')){
         parent.classList.remove('nav-open');
    }else{
        parent.className += " nav-open";
    }
}
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
</script>

Answer 5

我只是通過寫得到：

function clickHandler(dom){
        dom.parentNode.classList.toggle('nav-open');
        return false;
}

但感謝大家的回答:)