轉換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

回答

相關問題