[英]Converting Jquery Toggle to Javascript
I am totally new to web programming. 我是Web编程的新手。 I built a slide navigation and wanted to make it slide from the left to the middle.
我构建了一个幻灯片导航,并希望使其从左到中间滑动。 The thing is I just found a Jquery code.
事情是我刚刚找到了一个Jquery代码。 I tried to look it up by searching on google but the matches didn't match to the thing I was looking for.
我试图通过在Google上进行搜索来查找它,但匹配项与我要找的东西不匹配。
Here is the Code: 这是代码:
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
})
I would like to know if I can translate this into Javascript because I would like to continue using HTML, CSS and Javascript. 我想知道是否可以将其翻译成Javascript,因为我想继续使用HTML,CSS和Javascript。
Could someone help me out? 有人可以帮我吗?
In pure JavaScript it should be something like this: 在纯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/ JSFiddle: https ://jsfiddle.net/r0x7zehz/
This is pure javascript code 这是纯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);
Here is your HTML 这是您的HTML
<a href="#" class="nav-toggle" onclick="toggleFunction(this)">Toggle</a>
And Here is your javascript which adds style="display:none;" 这是您的javascript,它添加了style =“ display:none;”。 when the parent style="display:block;".
当父样式=“ display:block;”。 vice versa
反之亦然
<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>
I just got it by writing: 我只是通过写得到:
function clickHandler(dom){
dom.parentNode.classList.toggle('nav-open');
return false;
}
But thanks everyone for the answers :) 但感谢大家的回答:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.