将Jquery切换转换为Javascript

我对网络编程一无所知。我制作了一个幻灯片导航，想让它从左边滑到中间。问题是我刚刚找到了一个Jquery代码。我试着在谷歌上搜索，但是匹配的东西和我要找的东西不匹配

代码如下：

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

我想知道我是否可以将其转换为Javascript，因为我想继续使用HTML、CSS和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:

在纯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);
});

---

jsiddle:

您可以使用

classList.toggle（）

：

---

下面是一个示例。

您可以使用

classList.toggle（）

：

---

下面是一个示例。

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

---

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

这是你的HTML

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

这是您的javascript，它在父项style=“display:block；”时添加style=“display:none；”。反之亦然

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

功能切换功能（elem）{
var parent=elem.parentNode；
if（hasClass（父级，“导航打开”）{
parent.classList.remove（'nav-open'）；
}否则{
parent.className+=“导航打开”；
}
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}

这是您的HTML

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

这是您的javascript，它在父项style=“display:block；”时添加style=“display:none；”。反之亦然

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

功能切换功能（elem）{
var parent=elem.parentNode；
if（hasClass（父级，“导航打开”）{
parent.classList.remove（'nav-open'）；
}否则{
parent.className+=“导航打开”；
}
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}

我刚刚写下：

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

---

但是谢谢大家的回答：）

我刚刚写了以下内容：

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

---

但是谢谢大家的回答：）

看，etcjquery也是javascript:）我认为你应该自己尝试将它转换成javascript，如果你尝试的东西不起作用，请寻求帮助。与其要求

随时可用

代码。看，etcjquery也是javascript:）我认为你应该自己尝试将其转换为javascript，如果你尝试的东西不起作用，请寻求帮助。不要要求

随时可用的
代码。@Garzec你能发布你的html吗？当然，这是我的html:主页内容
 如何在此处格式化代码以获得更好的视图？请尝试将脚本标记放在底部，就在结束正文标记（）之前。您可以使用查看脚本是否正确加载。@Garzec您可以发布您的html吗？当然可以，这是我的html:Home-Side内容
 如何在此处格式化代码以获得更好的视图？请尝试将脚本标记放在底部，就在结束正文标记（）之前。您可以使用查看脚本是否正确加载。这看起来不错，但导航栏没有反应。我在html脚本中链接了我的javascript：这不对吗？@Garzec，我真的不知道。这完全取决于您如何组织标记和JavaScript文件。这看起来不错，但导航栏没有反应。我在html脚本中链接了我的javascript：这不对吗？@Garzec，我真的不知道。这完全取决于您组织标记和JavaScript文件的方式。这是我想要的方式：）但还有一个问题，关于我现在的html脚本：关于我粘贴在您代码中的JavaScript。但是我必须在按钮上点击两次才能使导航条滑动。我如何解决这个问题？这是我想要的工作方式：）但我现在还有一个问题，关于我的html脚本：关于我的javascript，我已经粘贴到了你的代码中。但是我必须在按钮上点击两次才能使导航条滑动。我如何解决这个问题？编辑后的答案。现在它没有给出正确的答案。现在是了