转换jquery切换到Javascript

我完全是网络编程的新手。我建立了一个幻灯片导航，并想从左侧滑到中间。事情是我刚刚找到一个Jquery代码。我试图通过在谷歌上搜索来查找它，但是匹配与我所寻找的不匹配。转换jquery切换到Javascript

这里是代码：

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

我想知道如果我能翻译成JavaScript，是因为我想继续使用HTML，CSS和Javascript。

有人可以帮我吗？

来源

2016-07-27 Garzec

看看[选择]（https://developer.mozilla.org/ en/docs/Web/Guide/CSS/Getting_started/Selectors），[querySelectorAll]（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll），[Element.classList]（ https://developer.mozilla.org/en/docs/Web/API/Element/classList）等 –

jquery也是javascript :) – lordkain

我想你应该尝试转换我t to Javascript自己，然后寻求帮助，如果你试过的东西不行。而不是要求“准备使用”代码。 –

在纯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/

来源

2016-07-27 11:53:18 VisioN

这似乎很好，但导航栏不反应。我以这种方式在html脚本中链接了我的javascript：它是不正确的？ – Garzec

@Garzec我真的不知道。它完全取决于你如何组织标记和JavaScript文件。 – VisioN

您可以使用classList.toggle()：

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

这里是一个codepen例子。

来源

2016-07-27 11:55:05

@Garzec你能发布你的html吗？ –

当然，这是我的html：<！DOCTYPE HTML> 首页 <链接类型= “文/ CSS” rel =“stylesheet”href =“Style.css”> 端内容

???

我怎样才能这里格式化的代码更好的视野？ – Garzec

尝试将脚本标记放置在结束标记之前的底部（）。您可以使用[ChromDev工具]（https://developers.google.com/web/tools/chrome-devt ools /？hl = en）查看脚本是否正确加载。 –

这是纯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);

来源

2016-07-27 12:01:09

这工作方式我想拥有它:)但1个问题是留在我的HTML脚本，我现在有：和我的JavaScript我粘贴在你的代码。但我必须在按钮上单击2次才能使导航栏滑动。我怎样才能解决这个问题？ – Garzec

这是你的HTML

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

，这里是你的JavaScript它增加了风格= “显示：无;”父母style =“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>

来源

2016-07-27 12:01:35

这不会按照OP的要求切换课程。 –

已编辑的答案。现在确实如此 –

我只是写了它：

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

但是感谢大家的答案:)

来源

2016-07-27 12:18:14 Garzec

转换jquery切换到Javascript

回答

相关问题